Implement basic routing

web/src/App.vue

@@ -1,12 +1,12 @@
 <script setup>
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <router-link to="/uiae">Go to Bar</router-link>
+  <router-view></router-view>
 </template>
 
 <style>

web/src/components/HelloWorld.vue

@@ -18,14 +18,6 @@ const count = ref(0)
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
 
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
-
   <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit

web/src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router/index.js'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router).mount('#app')

web/src/pages/Dashboard.vue

@@ -0,0 +1,34 @@
+<script setup>
+let dashboard;
+fetch("/dashboard")
+    .then(x => x.json())
+    .then(x => console.log(x))
+    .then(x => dashboard = x);
+</script>
+
+<!--
+{{define "title"}}
+    Budgets
+{{end}}
+
+{{define "new"}}
+    {{template "budget-new"}}
+{{end}}
+
+{{define "sidebar"}}
+    Please select a budget.
+{{end}}
+
+{{template "base" .}}
+-->
+
+<template>
+    <div v-if="dashboard != nil" v-for="budget in dashboard.Budgets" class="budget-item">
+        <a href="budget/{{budget.ID}}">{{budget.Name}}</a>
+        <span class="time"></span>
+    </div>
+    <div class="budget-item">
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newbudgetmodal">New Budget</button>
+        <span class="time"></span>
+    </div>
+</template>

web/src/router/index.js

@@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HelloWorld from '../components/HelloWorld.vue';
+import Dashboard from '../pages/Dashboard.vue';
+
+const routes = [
+  { path: '/', name: 'Index', component: Dashboard },
+  { path: '/uiae',  name: 'Home', component: HelloWorld },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export default router