client/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bulma": "^0.9.4",
     "sass": "^1.25.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

client/src/App.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import Table from "./components/Table.vue";
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
-    <div class="container">
-        <Table></Table>
-    </div>
+    <RouterView />
 </template>
-
-<style scoped></style>

client/src/main.ts

@@ -1,9 +1,12 @@
 import { createApp } from 'vue'
 import './style.scss'
-import App from './App.vue'
+import router from './router'
 import { state } from "./state";
 import 'bulma/css/bulma.css'
+import App from './App.vue'
 
-createApp(App).mount('#app')
 
-state.populate()
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+state.populate()

client/src/router.ts

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import TableView from './views/TableView.vue'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '/', component: TableView }
+        // for other pages:
+        // {path: '/', component: import('./views/TableView.vue')}
+    ]
+})
+
+export default router

client/src/views/TableView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Table from "../components/Table.vue";
+</script>
+
+<template>
+    <div class="container">
+        <Table></Table>
+    </div>
+</template>
+
+<style scoped></style>

client/yarn.lock

@@ -213,6 +213,11 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/reactivity-transform@3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
@@ -522,6 +527,13 @@ vite@^4.3.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-router@4:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81"
+  integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
 vue-template-compiler@^2.7.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"