feat(router): use typed router

Author: VChet

eslint.config.js

@@ -10,6 +10,8 @@ const SORT_IMPORT_CUSTOM_GROUP = {
 export default antfu({
   toml: false,
   isInEditor: false,
+  ignores: ["**/typed-router.ts"]
+}, {
   rules: {
     "antfu/consistent-list-newline": "off",
     "antfu/if-newline": "off",

package.json

@@ -52,6 +52,7 @@
     "stylelint-rem-over-px": "^1.0.2",
     "type-fest": "^4.41.0",
     "typescript": "^5.9.2",
+    "unplugin-vue-router": "^0.15.0",
     "vue-router": "^4.5.1",
     "vue-tsc": "^3.0.6",
     "workbox-build": "^7.3.0",

pnpm-lock.yaml

@@ -1,6 +1,50 @@
 <template>
-  <router-view />
+  <main class="container main-container">
+    <main-header />
+    <main-placeholder v-if="!repositories.length" />
+    <template v-else>
+      <tab-selector v-model="selectedTab" :items="tabs" />
+      <router-view v-slot="{ Component }">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </template>
+  </main>
 </template>
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { computed } from "vue";
+import { RouterView, useRoute, useRouter } from "vue-router";
+import { useEventsStore } from "@/store/events";
+import { useRepositoriesStore } from "@/store/repositories";
+import MainHeader from "@/components/header/main-header.vue";
+import MainPlaceholder from "@/components/main-placeholder.vue";
+import TabSelector from "@/components/tab-selector.vue";
+
+const route = useRoute("Repositories");
+const router = useRouter();
+
+const { repositories } = useRepositoriesStore();
+const { isFeedAvailable, amount } = useEventsStore();
+
+type Tab = "Repositories" | "Dependencies" | "Feed";
+const tabs = computed(() => {
+  const entries: { value: Tab, text: string }[] = [
+    { value: "Repositories", text: "Repositories" },
+    { value: "Dependencies", text: "Dependencies" }
+  ];
+  if (isFeedAvailable.value) entries.push({ value: "Feed", text: `Feed (${amount.value})` });
+  return entries;
+});
+
+const selectedTab = computed<Tab>({
+  get: () => route.name?.toString() as Tab ?? tabs.value[0].value,
+  set: (name) => { router.push({ name }); }
+});
 </script>
+<style lang="scss">
+.main-container {
+  display: grid;
+  gap: 1.5rem;
+}
+</style>

src/App.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts">
+definePage({ name: "Home", redirect: { name: "Repositories", params: {} } });
+</script>

src/views/DependenciesView.vue renamed to src/pages/dependencies.vue

@@ -1,30 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { routes } from "vue-router/auto-routes";
 import { useSettingsStore } from "./store/settings";
 
-const HomeView = () => import("@/views/HomeView.vue");
-const RepositoriesView = () => import("@/views/RepositoriesView.vue");
-const DependenciesView = () => import("@/views/DependenciesView.vue");
-const FeedView = () => import("@/views/FeedView.vue");
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: "/",
-      name: "Home",
-      component: HomeView,
-      redirect: { name: "Repositories" },
-      children: [
-        { name: "Repositories", path: "/repositories", component: RepositoriesView },
-        { name: "Dependencies", path: "/dependencies", component: DependenciesView },
-        { name: "Feed", path: "/feed", component: FeedView }
-      ]
-    },
-    {
-      path: "/:pathMatch(.*)*",
-      redirect: { name: "Home", params: {} }
-    }
-  ]
+  routes
 });
 
 router.beforeEach(() => {