feat: Add routing and route skeleton (#2)

package.json

@@ -15,7 +15,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.2",

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { RouterView } from "vue-router";
 
 let world = ref("World");
 </script>
@@ -8,6 +9,7 @@ let world = ref("World");
   <div>
     <h1><div class="world" /></h1>
     <h2>Hello {{ world }}</h2>
+    <RouterView />
   </div>
 </template>
 

src/main.ts

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

src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import HomeView from "../views/HomeView.vue";
+import CreateProposalView from "../views/CreateProposalView.vue";
+import ProposalsView from "../views/ProposalsView.vue";
+import ProposalView from "../views/ProposalView.vue";
+
+const routerHistory = createWebHistory();
+const routes = [
+  { path: "/", component: HomeView },
+  { path: "/proposals", component: ProposalsView },
+  { path: "/create", component: CreateProposalView },
+  { path: "/proposals/:id", component: ProposalView },
+];
+
+const router = createRouter({
+  history: routerHistory,
+  routes,
+});
+
+export default router;

src/views/CreateProposalView.vue

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

src/views/HomeView.vue

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

src/views/ProposalView.vue

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

src/views/ProposalsView.vue

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}