\nnpm i -D vite-ssg vue-router @unhead/vue\n\n\n```diff\n// package.json\n{\n \"scripts\": {\n \"dev\": \"vite\",\n- \"build\": \"vite build\"\n+ \"build\": \"vite-ssg build\"\n\n // OR if you want to use another vite config file\n+ \"build\": \"vite-ssg build -c another-vite.config.ts\"\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### How to allow Rollup tree-shake your client code\n\nIn order to allow Rollup tree-shake your client code at build time, you need to wrap your code using `import.meta.env.SSR`, that's, checking if the build is for the server: Rollup will remove the server code from the client build.\n```ts\nif (import.meta.env.SSR) {\n // your server code will be removed in the client build\n}\nelse {\n // your client code will be removed in the server build\n}\n```\n### Single Page SSG\n\nFor SSG of an index page only (i.e. without `vue-router`); import `vite-ssg/single-page` instead, and only install `@unhead/vue` (`npm i -D vite-ssg @unhead/vue`).\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### `
\n\n```ts\nimport routes from 'virtual:generated-pages'\n// main.ts\nimport { ViteSSG } from 'vite-ssg'\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