Vite SSG
Server-side generation for Vite.
Install
npm i -D vite-ssg vue-router @vue/server-renderer @vue/compiler-sfc
{
"scripts": {
"dev": "vite",
- "build": "vite build"
+ "build": "vite-ssg build"
}
}
// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'
// `export const createApp` is required
export const createApp = ViteSSG(
// the root component
App,
// vue-router options
{ routes },
// function to have custom setups
({ app, router, isClient }) => {
// install plugins etc.
}
)
Client Only
<client-only>
<your-components>
</client-only>
Component ClientOnly is registered globally along with the app creation.
Comparsion
Use Vitepress when you want:
- Zero config, out-of-box
- Single-purpose documentation site
- Lightweight (No double payload)
Cons:
-
⛔️ No plugin support, no access to Vite config
Use Vite SSG when you want:
- More controls on the build process and tooling
- The flexible plugin systems
- Multi-purpose application with some SSG to improve SEO and loading speed
Cons:
-
⛔️ Double payload
Example
See Vitesse
Thanks to the prior work
License
MIT License © 2020 Anthony Fu
