Sample project to use vite plugin for static site generation
- node 14+
Create a regular vue/vite project
npm create vite@latest simple-vue-vite-ssg --template vue
cd simple-vue-vite-ssg
npm i -D vite-ssg vue-router @vueuse/headNow setup vite-ssg. In this example we did the single page setup:
// import { createApp } from 'vue'
import { ViteSSG } from 'vite-ssg/single-page'
import './style.css'
import App from './App.vue'
// createApp(App).mount('#app')
export const createApp = ViteSSG(App)Everything else in development mode just works as expected.
If you decide to use github pages to publish, enable it on project settings and then select the github action workflow publish.
Then replace the original action with build+publish action available in this project.
Last but not least important, setup your public base path so your static site has css and js properly loaded.
This template should help get you started developing with Vue 3 in Vite.
The template uses Vue 3 <script setup> SFCs, check out the
script setup docs
to learn more.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).