Added routing, Tidied up components directory and added part of an unfinished API

api/main.ts

@@ -0,0 +1,26 @@
+// main API file. Handles all the routing/api stuff
+import { Router, Application } from "https://deno.land/x/oak/mod.ts";
+import { oakCors } from "https://deno.land/x/cors/mod.ts";
+
+
+const router = new Router();
+const app = new Application();
+
+// Creates the routes for the API server.
+// Example: localhost:8000/api will show "testAPIPoint"
+// in the HTML
+router
+    .get("/", (ctx) => {
+        ctx.response.body = "ESP Api";
+    })
+
+    .get("/api", (ctx) => {
+        ctx.response.body = "testAPIPoint";
+    });
+
+
+app.use(oakCors());
+app.use(router.routes());
+app.use(router.allowedMethods());
+
+await app.listen({ port: 8000 });

deno.json

@@ -1,6 +1,6 @@
 {
   "tasks": {
-    "dev": "deno task dev:api & deno task dev:vite",
+    "dev": "deno task dev:api && deno task dev:vite",
     "dev:api": "deno run -A api/main.ts",
     "dev:vite": "deno run -A npm:vite",
     "build": "deno run -A --node-modules-dir npm:vite build",
@@ -10,6 +10,7 @@
   "compilerOptions": {
     "lib": ["ES2020", "DOM", "DOM.Iterable"]
   },
+  "nodeModulesDir": "auto",
   "imports": {
     "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
     "@vitejs/plugin-vue": "npm:@vitejs/plugin-vue@^5.1.4",

deno.lock

@@ -1,19 +1,75 @@
 {
   "version": "4",
   "specifiers": {
+    "jsr:@oak/commons@1": "1.0.0",
+    "jsr:@std/assert@1": "1.0.6",
+    "jsr:@std/bytes@1": "1.0.2",
+    "jsr:@std/bytes@^1.0.2": "1.0.2",
+    "jsr:@std/crypto@1": "1.0.3",
+    "jsr:@std/encoding@1": "1.0.5",
+    "jsr:@std/encoding@^1.0.5": "1.0.5",
+    "jsr:@std/http@1": "1.0.9",
+    "jsr:@std/io@0.224": "0.224.9",
+    "jsr:@std/media-types@1": "1.0.3",
+    "jsr:@std/path@1": "1.0.7",
     "npm:@deno/vite-plugin@*": "1.0.0_vite@5.4.10",
     "npm:@deno/vite-plugin@1": "1.0.0_vite@5.4.10",
     "npm:@vitejs/plugin-vue@*": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vitejs/plugin-vue@^5.1.4": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vue/runtime-dom@*": "3.5.12",
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
+    "npm:path-to-regexp@6.2.1": "6.2.1",
     "npm:postcss@^8.4.47": "8.4.47",
     "npm:tailwindcss@^3.4.14": "3.4.14_postcss@8.4.47",
     "npm:url@~0.11.4": "0.11.4",
     "npm:vite@*": "5.4.10",
     "npm:vite@^5.4.10": "5.4.10",
+    "npm:vue-router@4": "4.4.5_vue@3.5.12",
     "npm:vue@^3.5.12": "3.5.12"
   },
+  "jsr": {
+    "@oak/commons@1.0.0": {
+      "integrity": "49805b55603c3627a9d6235c0655aa2b6222d3036b3a13ff0380c16368f607ac",
+      "dependencies": [
+        "jsr:@std/assert",
+        "jsr:@std/bytes@1",
+        "jsr:@std/crypto",
+        "jsr:@std/encoding@1",
+        "jsr:@std/http",
+        "jsr:@std/media-types"
+      ]
+    },
+    "@std/assert@1.0.6": {
+      "integrity": "1904c05806a25d94fe791d6d883b685c9e2dcd60e4f9fc30f4fc5cf010c72207"
+    },
+    "@std/bytes@1.0.2": {
+      "integrity": "fbdee322bbd8c599a6af186a1603b3355e59a5fb1baa139f8f4c3c9a1b3e3d57"
+    },
+    "@std/crypto@1.0.3": {
+      "integrity": "a2a32f51ddef632d299e3879cd027c630dcd4d1d9a5285d6e6788072f4e51e7f"
+    },
+    "@std/encoding@1.0.5": {
+      "integrity": "ecf363d4fc25bd85bd915ff6733a7e79b67e0e7806334af15f4645c569fefc04"
+    },
+    "@std/http@1.0.9": {
+      "integrity": "d409fc319a5e8d4a154e576c758752e9700282d74f31357a12fec6420f9ecb6c",
+      "dependencies": [
+        "jsr:@std/encoding@^1.0.5"
+      ]
+    },
+    "@std/io@0.224.9": {
+      "integrity": "4414664b6926f665102e73c969cfda06d2c4c59bd5d0c603fd4f1b1c840d6ee3",
+      "dependencies": [
+        "jsr:@std/bytes@^1.0.2"
+      ]
+    },
+    "@std/media-types@1.0.3": {
+      "integrity": "b12d30a7852f7578f4d210622df713bbfd1cbdd9b4ec2eaf5c1845ab70bab159"
+    },
+    "@std/path@1.0.7": {
+      "integrity": "76a689e07f0e15dcc6002ec39d0866797e7156629212b28f27179b8a5c3b33a1"
+    }
+  },
   "npm": {
     "@alloc/quick-lru@5.2.0": {
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
@@ -269,6 +325,9 @@
         "@vue/shared"
       ]
     },
+    "@vue/devtools-api@6.6.4": {
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "@vue/reactivity@3.5.12": {
       "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
       "dependencies": [
@@ -713,6 +772,9 @@
         "minipass"
       ]
     },
+    "path-to-regexp@6.2.1": {
+      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+    },
     "picocolors@1.1.1": {
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
@@ -993,6 +1055,13 @@
         "rollup"
       ]
     },
+    "vue-router@4.4.5_vue@3.5.12": {
+      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "dependencies": [
+        "@vue/devtools-api",
+        "vue"
+      ]
+    },
     "vue@3.5.12": {
       "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
       "dependencies": [
@@ -1029,6 +1098,49 @@
       "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ=="
     }
   },
+  "redirects": {
+    "https://deno.land/x/cors/mod.ts": "https://deno.land/x/cors@v1.2.2/mod.ts",
+    "https://deno.land/x/oak/mod.ts": "https://deno.land/x/oak@v17.1.2/mod.ts"
+  },
+  "remote": {
+    "https://deno.land/x/cors@v1.2.2/abcCors.ts": "cdf83a7eaa69a1bf3ab910d18b9422217902fac47601adcaf0afac5a61845d48",
+    "https://deno.land/x/cors@v1.2.2/attainCors.ts": "7d6aba0f942495cc31119604e0895c9bb8edd8f8baa7fe78e6c655bd0b4cbf59",
+    "https://deno.land/x/cors@v1.2.2/cors.ts": "0e2d9167e3685f9bcf48f565e312b6e1883fa458f7337e5ce7bc2e3b29767980",
+    "https://deno.land/x/cors@v1.2.2/mithCors.ts": "3a359d6e716e0410ede278ab54d875b293a2d66d838aaa7cfbf9ddc1e9e990d3",
+    "https://deno.land/x/cors@v1.2.2/mod.ts": "2b351913f56d77ad80cb3b8633d4539c9eeddb426dae79437ada0e6a9cb4f1a6",
+    "https://deno.land/x/cors@v1.2.2/oakCors.ts": "1348dc7673c61b85d2e80559a7b44f8e0246eaa6bcc6ec744fafe5d9b13b5c71",
+    "https://deno.land/x/cors@v1.2.2/opineCors.ts": "fb5790115c26b7061d84b8d6c17d258a1e241bcab75b0bc3ca1fdb2e57bc5072",
+    "https://deno.land/x/cors@v1.2.2/types.ts": "97546633ccc7f0df7a29bacba5d91dc6f61decdd1b65258300244dba905d34b8",
+    "https://deno.land/x/oak@v17.1.2/application.ts": "2bcc73b3f22a193554c9958f7080ea635db25594d25ff7944021fca5bf74adba",
+    "https://deno.land/x/oak@v17.1.2/body.ts": "0eb7ab9df44d1b79933463d596b5e1a4f0991c94cff591861e58a413bda3f3db",
+    "https://deno.land/x/oak@v17.1.2/context.ts": "345cfdaa5a2310558ee0863f2fba5f9ba648188412b16ce342c33266c085f5d3",
+    "https://deno.land/x/oak@v17.1.2/deps.ts": "b778c76e91d6d2afe6124981212b6dc3d0b195739ea01857a45396dc78812b59",
+    "https://deno.land/x/oak@v17.1.2/http_server_bun.ts": "cb3a66c735cd0533c4c3776b37ae627ab42344c82f91dff63e3030d9656fd3a0",
+    "https://deno.land/x/oak@v17.1.2/http_server_native.ts": "3bea00ebb9638203d2449fbf9a14a6b87f119bd45012f13282ececdf7b4c4242",
+    "https://deno.land/x/oak@v17.1.2/http_server_native_request.ts": "a4da6f4939736e6323720db2d4b0d19ff2e83f02e52ab1eea9ae80f2c047fa56",
+    "https://deno.land/x/oak@v17.1.2/http_server_node.ts": "9bb5291c15305b297fd634aa4c6b1d5054368f4b7a171d7c7c302c73eb2489ed",
+    "https://deno.land/x/oak@v17.1.2/middleware.ts": "4170180fe5009d2581a0bdc995e5953b90ccb5b1c3767f3eae8a4fe238b8bd81",
+    "https://deno.land/x/oak@v17.1.2/middleware/etag.ts": "eb3cb3a8862ca1990ce80b7d1c3f142c866b22d34c2f785a0e8b46bc34b91f7d",
+    "https://deno.land/x/oak@v17.1.2/middleware/proxy.ts": "104890bd3990fa68618c36141d56aff5f95a51deac57ce8b8b0c7a14a8fd2ea4",
+    "https://deno.land/x/oak@v17.1.2/middleware/serve.ts": "efceebd70afb73bcabe0a6a8981f3d8474a2f2f30e85b46761aee49e81bd9d6a",
+    "https://deno.land/x/oak@v17.1.2/mod.ts": "38e53e01e609583e843f3e2b2677de9872d23d68939ce0de85b402e7a8db01a7",
+    "https://deno.land/x/oak@v17.1.2/node_shims.ts": "4db1569b2b79b73f37c4d947f4aaa50a93e266d48fe67601c8a31af17a28884d",
+    "https://deno.land/x/oak@v17.1.2/request.ts": "1e7f2c338cd6889b616bbdc9e2062eac27acbffde05c685adfb1c60ecc80682a",
+    "https://deno.land/x/oak@v17.1.2/response.ts": "75724db76f2dd782827f2dcaa00e4e1732709399bad2458c787fed2c95c4f8be",
+    "https://deno.land/x/oak@v17.1.2/router.ts": "d625307016e5db92a9ff187d9917093cb441a8c442c0d78d8dbdbd9575816b72",
+    "https://deno.land/x/oak@v17.1.2/send.ts": "340676bbed632dd11194b930467a4e1aec64199b08328e6394cb7669b64c98a6",
+    "https://deno.land/x/oak@v17.1.2/testing.ts": "cbefaf9d21452e829999eda9b99b920df7fde3f702528a484a4433ffed20a9cf",
+    "https://deno.land/x/oak@v17.1.2/types.ts": "cd4ccd3e182d0cba2117cd27f560267970470ab9c0ff6556cadd73f605193be7",
+    "https://deno.land/x/oak@v17.1.2/utils/clone_state.ts": "cf8989ddd56816b36ada253ae0acdbd46cdf3d68dbe674d2b66c46640fab3500",
+    "https://deno.land/x/oak@v17.1.2/utils/consts.ts": "137c4f73479f5e98a13153b9305f06f0d85df3cf2aacad2c9f82d4c1f3a2f105",
+    "https://deno.land/x/oak@v17.1.2/utils/create_promise_with_resolvers.ts": "de99e9a998162b929a011f8873eaf0895cf4742492b3ce6f6866d39217342523",
+    "https://deno.land/x/oak@v17.1.2/utils/decode.ts": "2fd843f1217872318c339006dad266d62cdb99bff84bb6adef8a4b86269f51ce",
+    "https://deno.land/x/oak@v17.1.2/utils/decode_component.ts": "d3e2c40ecdd2fdb79761c6e9ae224cf01a4643f7c5f4c1e0b69698d43025261b",
+    "https://deno.land/x/oak@v17.1.2/utils/encode_url.ts": "c0ed6b318eb9523adeebba32eb9acd059c0f94d3511b2b9e3b024722d1b3dfb8",
+    "https://deno.land/x/oak@v17.1.2/utils/resolve_path.ts": "aa39d54a003b38fee55f340a0cba3f93a7af85b8ddd5fbfb049a98fc0109b36d",
+    "https://deno.land/x/oak@v17.1.2/utils/streams.ts": "3da73b94681f8d27a82cc67df3f91090ec0bd6c3e9ab957af588d41ab585d923",
+    "https://deno.land/x/oak@v17.1.2/utils/type_guards.ts": "a8dbb5ab7424f0355b121537d2454f927e0ca9949262fb67ac4fbefbd5880313"
+  },
   "workspace": {
     "dependencies": [
       "npm:@deno/vite-plugin@1",

src/App.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import Sidebar from "../src/components/sidebar.vue";
+import Sidebar from "./components/home_components/sidebar.vue";
-import NiceThings from "../src/components/interesting-hashtags.vue";
+import NiceThings from "./components/home_components/interesting-hashtags.vue";
-import Feed from "../src/components/feed.vue";
+import Feed from "./components/home_components/feed.vue";
-import Contacts from "../src/components/contacts.vue";
+import Contacts from "./components/home_components/contacts.vue";
-import Legal from "../src/components/legal.vue";
+import Legal from "./components/home_components/legal.vue";
 </script>
 
 
 <template>
-  <div id="main" class="bg-weiss flex p-2">
+  <router-view />
-    <Sidebar></Sidebar>
-    <nice-things></nice-things>
-    <feed></feed>
-    <div class="w-1/4">
-      <contacts></contacts>
-      <legal></legal>
-    </div>
-  </div>
 </template>

src/assets/main.css

@@ -1,5 +1,3 @@
-/*
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-*/

src/components/Home.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Sidebar from "./home_components/sidebar.vue";
+import NiceThings from "./home_components/interesting-hashtags.vue";
+import Feed from "./home_components/feed.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+</script>
+
+
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>

src/components/Login.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Login Page
+</template>
+
+<style scoped>
+
+</style>

src/components/home_components/contacts.vue

@@ -15,12 +15,12 @@ const contacts =[
       <ul class="space-y-1">
         <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
           <!--CONTACT-->
-          <img src="../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
+          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
           <div class="flex flex-col">
             <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
             <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
           </div>
-          <img src="../assets/icons/mail.png" alt="" class="ml-auto">
+          <img src="../../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>

src/components/home_components/feed.vue

@@ -55,7 +55,7 @@
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
           <!-- POST -->
-          <img src="../assets/default_pp.png" alt="" class="w-16 h-16">
+          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
               <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -66,13 +66,13 @@
             </div>
             <div class="flex "> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
-                <img src="../assets/icons/comment.png" alt="" class="align-middle">
+                <img src="../../assets/icons/comment.png" alt="" class="align-middle">
                 <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
                 <label class="text-sm m-1" v-else>Comments disabled</label>
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
-                <img type="image" alt="" src="../assets/icons/herz.png" class="align-middle">
+                <img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>

src/components/home_components/sidebar.vue

@@ -0,0 +1,42 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+const sb_home = () => {
+  console.log("home");
+}
+const sb_search = () => {
+  console.log("Search");
+}
+const sb_notifications = () => {
+  console.log("Notifications");
+}
+const sb_messages = () => {
+  console.log("Messages");
+}
+const sb_accounts = () => {
+  console.log("Accounts");
+}
+const sb_settings = () => {
+  console.log("Settings");
+}
+
+</script>
+
+<template>
+  <div class="pt-4 pl-1">
+    <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
+    <div class="align-middle space-y-3 pt-3 pl-3">
+      <img src="../../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
+      <img src="../../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
+      <img src="../../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
+      <img src="../../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
+      <img src="../../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_accounts">
+      <img src="../../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/sidebar.vue

@@ -1,42 +0,0 @@
-
-<script setup lang="ts">
-// Funktionen um die Seiten zu öffnen
-// home -> app.vue
-const sb_home = () => {
-  console.log("home");
-}
-const sb_search = () => {
-  console.log("Search");
-}
-const sb_notifications = () => {
-  console.log("Notifications");
-}
-const sb_messages = () => {
-  console.log("Messages");
-}
-const sb_accounts = () => {
-  console.log("Accounts");
-}
-const sb_settings = () => {
-  console.log("Settings");
-}
-
-</script>
-
-<template>
-  <div class="pt-4 pl-1">
-    <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
-    <div class="align-middle space-y-3 pt-3 pl-3">
-      <img src="../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
-      <img src="../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
-      <img src="../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
-      <img src="../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
-      <img src="../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg"  v-on:click="sb_accounts">
-      <img src="../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/main.ts

@@ -1,8 +1,8 @@
-import './assets/main.css'
+import './assets/main.css';
-
+import { createApp } from 'vue';
-import { createApp } from 'vue'
 import App from '../src/App.vue';
+import router from "./router/index.ts";
 
 const app = createApp(App);
-
+app.use(router);
 app.mount('#app');

src/router/index.ts

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../components/Home.vue";
+import Login from "../components/Login.vue";
+
+const routes = [
+    {
+        path: "/",
+        name: "home",
+        component: Home,
+    },
+    {
+        path: "/login",
+        name: "login",
+        component: Login,
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory("/"),
+    routes,
+});
+
+export default router;
+
+/*
+<script setup lang="ts">
+import Sidebar from "../src/components/sidebar.vue";
+import NiceThings from "../src/components/interesting-hashtags.vue";
+import Feed from "../src/components/feed.vue";
+import Contacts from "../src/components/contacts.vue";
+import Legal from "../src/components/legal.vue";
+</script>
+
+
+<template>
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <nice-things></nice-things>
+    <feed></feed>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>
+ */

vite.config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'npm:vite';
 import deno from 'npm:@deno/vite-plugin';
 import vue from 'npm:@vitejs/plugin-vue';
+import "npm:vue-router@4";
 
 export default defineConfig({
   plugins: [deno(), vue()],