router config

.gitignore

@@ -30,3 +30,4 @@ coverage
 *.tsbuildinfo
 result
 .direnv
+.vite-ssg-temp/

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />

flake.nix

@@ -13,7 +13,7 @@
             name = "rachel-blog-vue";
             src = ./.;
             npmBuildScript = "build-only";
-            npmDepsHash = "sha256-Bs6uurRg+D2f1A05TFwBpj84cxrLDuHt0Iv+SdyfTes=";
+            npmDepsHash = "sha256-rlxTMuYSPMuSwP0zhqc3pEgG0AcuUGS8lofFjR1d9L4=";
             installPhase = ''
               mv ./dist $out
             '';

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "build-only": "vite build",
+    "build-only": "vite-ssg build",
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
+    "@unhead/vue": "^1.9.16",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/language-server": "^2.0.26",
     "@vue/tsconfig": "^0.5.1",
@@ -25,6 +26,8 @@
     "typescript": "~5.4.0",
     "typescript-language-server": "^4.3.3",
     "vite": "^5.3.1",
+    "vite-plugin-pages": "^0.32.3",
+    "vite-ssg": "^0.23.8",
     "vue-tsc": "^2.0.21"
   }
 }

src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import TheHeader from './components/TheHeader.vue'
-import ThePosts from './components/ThePosts.vue'
 import TheFooter from './components/TheFooter.vue'
 </script>
 
@@ -10,7 +9,7 @@ import TheFooter from './components/TheFooter.vue'
     <TheHeader />
   </header>
   <main>
-    <ThePosts />
+    <RouterView />
   </main>
   <footer>
     <TheFooter />

src/components/TheHeader.vue

@@ -4,7 +4,9 @@
 <template>
   <div class="sitetitle">
     <div class="titlecontainer">
-      <a href="/">rachel.cafe</a>
+      <span>
+      <RouterLink to="/">rachel.cafe</RouterLink>
+      </span>
     </div>
   </div>
 </template>
@@ -36,7 +38,7 @@
   justify-content: center;
 }
 
-.titlecontainer a {
+.titlecontainer span {
   font-size: 2em;
 }
 </style>

src/main.ts

@@ -1,6 +1,12 @@
 import './main.scss'
 
-import { createApp } from 'vue'
+import { ViteSSG } from 'vite-ssg'
+import routes from '~pages'
+
 import App from './App.vue'
 
-createApp(App).mount('#app')
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  (() => {})
+)

src/pages/Index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import ThePosts from '../components/ThePosts.vue'
+</script>
+
+<template>
+  <ThePosts />
+</template>

vite.config.ts

@@ -2,11 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Pages from 'vite-plugin-pages'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    Pages()
   ],
   resolve: {
     alias: {