refactor(frontend): add base router support

Author: Celtech

packages/app/package.json

@@ -7,7 +7,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",

packages/app/src/App.vue

@@ -1,3 +1,9 @@
 <template>
-  <h1 class="text-3xl font-bold underline">Authentication!</h1>
+  <div id="nav">
+    <router-link to="/">Home</router-link>
+    |
+    <router-link to="/about">About</router-link>
+  </div>
+
+  <router-view />
 </template>

packages/app/src/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import router from './router';
+
 import './assets/css/index.css';
 
-createApp(App).mount('#app');
+createApp(App).use(router).mount('#app');

packages/app/src/router.js

@@ -0,0 +1,16 @@
+import { createWebHistory, createRouter } from 'vue-router';
+
+const Home = { template: '<div>Home</div>' };
+const About = { template: '<div>About</div>' };
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

yarn.lock

@@ -1158,6 +1158,11 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
+"@vue/devtools-api@^6.0.0":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
+  integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+
 "@vue/[email protected]":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz#0caa47c4344df4ae59f5a05dde2a8758829f8eca"
@@ -6352,6 +6357,13 @@ vue-eslint-parser@^9.0.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-router@^4.0.16:
+  version "4.0.16"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.16.tgz#9477beeeef36e80e04d041a1738801a55e6e862e"
+  integrity sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
+
 vue@^3.2.25:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"