Vite SSG

Static site generation for Vue 3 on Vite

ViteStatic site generatorVue
antfu-collective/vite-ssgvite-ssg

README

Vite SSG


Static-site generation for Vue 3 on Vite.

ℹ️ Vite 2 is supported from v0.2.x, Vite 1's support is discontinued.


Install


This library requires Node.js version >= 14


  1. ```
  2. npm i -D vite-ssg
  3. ```
vue-router @unhead/vue

  1. ```diff
  2. // package.json
  3. {
  4.   "scripts": {
  5.     "dev": "vite",
  6. -   "build": "vite build"
  7. +   "build": "vite-ssg build"

  9.     // OR if you want to use another vite config file
  10. +   "build": "vite-ssg build -c another-vite.config.ts"
  11.   }
  12. }
  13. ```

  1. ```ts
  2. // src/main.ts
  3. import { ViteSSG } from 'vite-ssg'
  4. import App from './App.vue'

  6. // `export const createApp` is required instead of the original `createApp(App).mount('#app')`
  7. export const createApp = ViteSSG(
  8.   // the root component
  9.   App,
  10.   // vue-router options
  11.   { routes },
  12.   // function to have custom setups
  13.   ({ app, router, routes, isClient, initialState }) => {
  14.     // install plugins etc.
  15.   },
  16. )
  17. ```

Single Page SSG


For 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).

  1. ```ts
  2. // src/main.ts
  3. import { ViteSSG } from 'vite-ssg/single-page'
  4. import App from './App.vue'

  6. // `export const createApp` is required instead of the original `createApp(App).mount('#app')`
  7. export const createApp = ViteSSG(App)
  8. ```

### ``

The ClientOnly component is registered globally when the app is created.

  1. ```html
  2. <client-only>
  3.   <your-client-side-components />
  4.   <template #placeholder>
  5.     <your-placeholder-components />
  6.   </template>
  7. </client-only>
  8. ```

Document head


We ship [@unhead/vue](https://unhead.harlanzw.com/integrations/vue/setup) to manage the document-head out of the box. You can use it directly in your pages/components.
For example:

  1. ```html
  2. <template>
  3.   <button @click="count++">Click</button>
  4. </template>
  6. <script setup>
  7. import { useHead } from '@unhead/vue'
  9. useHead({
  10.   title: 'Website Title',
  11.   meta: [
  12.     {
  13.       name: 'description',
  14.       content: 'Website description',
  15.     },
  16.   ],
  17. })
  18. </script>
  19. ```

That's all! No configuration is needed. Vite SSG will automatically handle the server-side rendering and merging.

See [@unhead/vue's docs](https://unhead.unjs.io/setup/vue/installation) for more usage information about useHead.