\nnpm i -D vite-ssg vue-router @vueuse/head\n\n\n```diff\n// package.json\n{\n \"scripts\": {\n \"dev\": \"vite\",\n- \"build\": \"vite build\"\n+ \"build\": \"vite-ssg build\"\n }\n}\n```\n\n```ts\n// src/main.ts\nimport { ViteSSG } from 'vite-ssg'\nimport App from './App.vue'\n\n// `export const createApp` is required instead of the original `createApp(App).mount('#app')`\nexport const createApp = ViteSSG(\n // the root component\n App,\n // vue-router options\n { routes },\n // function to have custom setups\n ({ app, router, routes, isClient, initialState }) => {\n // install plugins etc.\n },\n)\n```\n\n### Single Page SSG\n\nTo have SSG for the index page only (without `vue-router`), import from `vite-ssg/single-page` instead, and you only need to install `npm i -D vite-ssg @vueuse/head`.\n\n```ts\n// src/main.ts\nimport { ViteSSG } from 'vite-ssg/single-page'\nimport App from './App.vue'\n\n// `export const createApp` is required instead of the original `createApp(App).mount('#app')`\nexport const createApp = ViteSSG(App)\n```\n\n### `
\nFollowing [Pinia's guide](https://pinia.esm.dev/ssr), you will to adapt your `main.{ts,js}` file to look\nlike this:\n\n```ts\n// main.ts\nimport { ViteSSG } from 'vite-ssg'\nimport { createPinia } from 'pinia'\nimport routes from 'virtual:generated-pages'\n// use any store you configured that you need data from on start-up\nimport { useRootStore } from './store/root'\nimport App from './App.vue'\n\nexport const createApp = ViteSSG(\n App,\n { routes },\n ({ app, router, initialState }) => {\n const pinia = createPinia()\n app.use(pinia)\n\n if (import.meta.env.SSR)\n initialState.pinia = pinia.state.value\n else\n pinia.state.value = initialState.pinia || {}\n\n router.beforeEach((to, from, next) => {\n const store = useRootStore(pinia)\n if (!store.ready)\n // perform the (user-implemented) store action to fill the store's state\n store.initialize()\n next()\n })\n },\n)\n```\n
\n\n```ts\n// main.ts\nimport { ViteSSG } from 'vite-ssg'\nimport routes from 'virtual:generated-pages'\nimport { createStore } from 'vuex'\nimport App from './App.vue'\n\n// Normally, you should definitely put this in a separate file\n// in order to be able to use it everywhere\nconst store = createStore({\n // ...\n})\n\nexport const createApp = ViteSSG(\n App,\n { routes },\n ({ app, router, initialState }) => {\n app.use(store)\n\n if (import.meta.env.SSR)\n initialState.store = store.state\n else\n store.replaceState(initialState.store)\n\n router.beforeEach((to, from, next) => {\n // perform the (user-implemented) store action to fill the store's state\n if (!store.getters.ready)\n store.dispatch('initialize')\n\n next()\n })\n },\n)\n```\n