vok123 / vue3-ts-vite-ssr-starter

Use vue3 vite4 typescript eslint SSR pinia unocss vue-router element-plus scss

vue3-ts-vite-ssr-starter

• Lightning-fast cold server start
• Instant hot module replacement (HMR) and dev SSR
• True on-demand compilation
• Use vue3 vite4.0 typescript eslint SSR pinia unocss vue-router element-plus scss

Getting Started

• dev

npm i
npm run dev

• preview

npm i
npm run preview

• build

npm i
npm run build

vue3-ts-vite-ssr-starter's Issues

请问用nginx怎么部署？

vue-extend.d.ts

vue-extend.d.ts error

import { IRootStore } from '../store'

.vue is not ssr

<template>
  <div class="index">
    <ElSwitch v-model="isActive" active-color="#13ce66" inactive-color="#ff4949">
      switch
    </ElSwitch>
    <div v-for="item in fruitList" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
import { ElSwitch } from 'element-plus';
import 'element-plus/theme-chalk/el-switch.css';
import { useMarket } from '@/store/market';

export default defineComponent({
  name: 'Index',
  components: {
    ElSwitch
  },
  setup () {
    const state: any = reactive({
      fruitList: []
    });
    const isActive = ref(false);

    // const marketStore = useMarket();
    // await marketStore.getList();
    // const { fruitList } = marketStore;
    // state.fruitList = fruitList;

    const getData = async () => {
      const marketStore = useMarket();
      await marketStore.getList();
      const { fruitList } = marketStore;
      state.fruitList = fruitList;
    };

    onMounted(() => {
      getData(); // not ssr
    });

    return {
      ...toRefs(state),
      isActive
    };
  }
});
</script>

<style scoped>

</style>

remove getData methods is ok.

Cannot run "npm run dev"

Thank you for your wonderfull repo, I got stuck when I run "npm run dev"
I got these error:

Is it because vite or the config ? Btw, I'm new in vite.
Thanks before!

some troubles

1. Not provide (entry-server.js):

app.provide(ID_INJECTION_KEY, {
    prefix: 1024,
    current: 0
  });

When run yarn dev, on pages: User, Market occur warning in console:

ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
  prefix: number,
  current: number,
})

2. When run the App in SPA mode (vite --force):
   On pages User, Market occur errors:

3. yarn.lock file is corrupt
4. pnpm-lock.yaml is old version.

大佬，打包之后如何运行？

[

前端服务端输出环境变量不一致

运行node server时，终端显示import.meta.env.SSR为true，但是在chrome控制台显示import.meta.env.SSR为false

JSX/TSX example request

Hello,

How to use asyncData({ store }) inside vue3 composition API setup() method?

I use JSX/TSX which is a return result of setup() method:

import { defineComponent, computed, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { IRootState } from "@/store"

export default defineComponent({
    name: 'SomeComponent',

    setup() {
        const route = useRoute()
        const times = ref(0)

        // use computed
        const doubleTimes = computed(() => { return times.value * 2 })

        // asyncData({ store }) {
        //     console.log('!!!!!!!!!!!!!! asyncData !!!!!!!!!!!!!!!!!!!!');
        //     return store.dispatch('market/getFruitList');
        // },

        return () => (
            <div>
                <h2> +1S !!! </h2>
                <button onClick={() => { times.value++ }}>Times+1</button>
                <div>{times.value}</div>
                <div>{doubleTimes.value}</div>
                <div>{route.params.domain}</div>

                <div>{JSON.stringify(fruitList.value, null, 2)}</div>

            </div>
        )
    }
})

What I need is to access fruitList from inside JSX/TSX markup. Maybe some kind of life-cycle hook like https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks
Can you please suggest how to do it?

组件样式没有ssr

/user 页面并刷新，页面会闪动（是动态渲染的），组件的样式有问题