init vue router

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "luxon": "^3.3.0",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@types/luxon": "^3.2.0",

pnpm-lock.yaml

@@ -8,11 +8,13 @@ specifiers:
   vite: ^4.1.0
   vitest: ^0.29.2
   vue: ^3.2.45
+  vue-router: '4'
   vue-tsc: ^1.0.24
 
 dependencies:
   luxon: 3.3.0
   vue: 3.2.47
+  vue-router: 4.1.6_vue@3.2.47
 
 devDependencies:
   '@types/luxon': 3.2.0
@@ -379,6 +381,10 @@ packages:
       '@vue/compiler-dom': 3.2.47
       '@vue/shared': 3.2.47
 
+  /@vue/devtools-api/6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.47:
     resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
     dependencies:
@@ -961,6 +967,15 @@ packages:
       - terser
     dev: true
 
+  /vue-router/4.1.6_vue@3.2.47:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
   /vue-template-compiler/2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:

src/App.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import ResponsiveTimeUntil from "./components/ResponsiveTimeUntil.vue"
-</script>
-
 <template>
-  <ResponsiveTimeUntil />
+  <router-view></router-view>
 </template>

src/main.ts

@@ -1,5 +1,6 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from "vue"
+import "./style.css"
+import App from "./App.vue"
+import { router } from "./router/router"
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount("#app")

src/pages/Home.vue

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

src/router/router.ts

@@ -0,0 +1,7 @@
+import Home from "../pages/Home.vue"
+import { createRouter, createWebHashHistory } from "vue-router"
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [{ path: "/", component: Home }],
+})