Usable router setup

web/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+	<router-view />
+</template>
+<script setup lang="ts">
+</script>

web/src/components/NavBar.vue

@@ -5,15 +5,22 @@
 		</div>
 		<nav class="flex justify-center">
 			<ul class="flex space-x-4">
-				<li><router-link to="/">Home</router-link></li>
+				<!-- <li><router-link to="/">Home</router-link></li>
 				<li><router-link to="/about">About</router-link></li>
-				<li><router-link to="/contact">Contact</router-link></li>
+				<li><router-link to="/contact">Contact</router-link></li> -->
+				<li v-for="route in routes" :key="route.path">
+					<router-link :to="route.path">{{ route.name }}</router-link>
+				</li>
 			</ul>
 		</nav>
 		<ColorMode />
 	</div>
 </template>
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import ColorMode from './util/ColorMode.vue';
+const router = useRouter();
+
+const routes = router.getRoutes();
 
 </script>

web/src/entry-client.ts

@@ -1,7 +1,8 @@
 import './assets/index.css'
 import { createApp } from './main'
+import { router } from './router'
 
 
 const { app } = createApp()
-
+app.use(router)
 app.mount('#app')

web/src/main.ts

@@ -1,13 +1,12 @@
 import { createSSRApp } from 'vue'
-import App from './pages/Index.vue'
-import { router } from './router'
+import App from './App.vue'
+
 
 
 // SSR requires a fresh app instance per request, therefore we export a function
 // that creates a fresh app instance. If using Vuex, we'd also be creating a
 // fresh store here.
 export function createApp() {
 	const app = createSSRApp(App)
-	app.use(router)
 	return { app }
 }

web/src/router.ts

@@ -1,12 +1,20 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Index from '@/pages/Index.vue'
 
 const routes = [
-	{ path: '', component: Index },
-	{ path: '/utilitydust', component: () => import('@/pages/UtilityDust.vue') },
+	{
+		path: '/',
+		component: Index,
+		name: 'Index'
+	},
+	{
+		path: '/utilitydust',
+		component: () => import('@/pages/UtilityDust.vue'),
+		name: 'utilitydust'
+	},
 ]
 
 export const router = createRouter({
-	history: createMemoryHistory(),
+	history: createWebHistory('/'),
 	routes,
 })