From 7a2fe0756ce75930575b2597ffbabda5aaffeb8e Mon Sep 17 00:00:00 2001
From: VChet <17050347+VChet@users.noreply.github.com>
Date: Sat, 11 Oct 2025 22:35:04 +0500
Subject: [PATCH] feat(router): use typed router

Co-authored-by: rudnovd <rudnov.d@gmail.com>
---
 eslint.config.ts                              |   3 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  91 ++++++++++++++
 src/components/event-card.vue                 |   2 +-
 src/components/main-nav.vue                   |   9 +-
 .../CalendarView.vue => pages/calendar.vue}   |  51 ++++----
 .../calendar/month.vue}                       |   6 +-
 .../WeekView.vue => pages/calendar/week.vue}  |   0
 .../YearView.vue => pages/calendar/year.vue}  |   0
 .../constellations/[month].vue}               |   4 +-
 .../constellations/index.vue}                 |   4 +-
 .../HolidayView.vue => pages/holiday.vue}     |   4 +-
 src/pages/index.vue                           |   3 +
 .../moon-phase.vue}                           |   2 +
 .../onboarding.vue}                           |   2 +
 .../SearchView.vue => pages/search.vue}       |   2 +
 .../SettingsView.vue => pages/settings.vue}   |   2 +
 .../summoning-day.vue}                        |   4 +-
 src/plugins/router.ts                         | 109 +----------------
 src/types/router.ts                           |   3 +
 src/types/typed-router.ts                     | 111 ++++++++++++++++++
 tsconfig.json                                 |   2 +-
 vite.config.ts                                |  21 ++++
 23 files changed, 295 insertions(+), 141 deletions(-)
 rename src/{views/CalendarView.vue => pages/calendar.vue} (62%)
 rename src/{views/calendar/MonthView.vue => pages/calendar/month.vue} (94%)
 rename src/{views/calendar/WeekView.vue => pages/calendar/week.vue} (100%)
 rename src/{views/calendar/YearView.vue => pages/calendar/year.vue} (100%)
 rename src/{views/ConstellationView.vue => pages/constellations/[month].vue} (95%)
 rename src/{views/ConstellationsView.vue => pages/constellations/index.vue} (91%)
 rename src/{views/HolidayView.vue => pages/holiday.vue} (95%)
 create mode 100644 src/pages/index.vue
 rename src/{views/MoonPhaseView.vue => pages/moon-phase.vue} (97%)
 rename src/{views/OnboardingView.vue => pages/onboarding.vue} (95%)
 rename src/{views/SearchView.vue => pages/search.vue} (96%)
 rename src/{views/SettingsView.vue => pages/settings.vue} (98%)
 rename src/{views/SummoningDayView.vue => pages/summoning-day.vue} (95%)
 create mode 100644 src/types/typed-router.ts

diff --git a/eslint.config.ts b/eslint.config.ts
index e21758b..6504de5 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -10,7 +10,8 @@ const SORT_IMPORT_CUSTOM_GROUP = {
 export default antfu({
   toml: false,
   isInEditor: false,
-  ignores: ["src/scripts/*.js"],
+  ignores: ["src/scripts/*.js", "**/typed-router.ts"]
+}, {
   rules: {
     "antfu/consistent-list-newline": "off",
     "antfu/if-newline": "off",
diff --git a/package.json b/package.json
index 551472c..f98ed5f 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "stylelint-order": "^7.0.0",
     "stylelint-rem-over-px": "^1.0.2",
     "typescript": "^5.9.3",
+    "unplugin-vue-router": "^0.15.0",
     "vue-tsc": "^3.1.0",
     "workbox-build": "^7.3.0",
     "workbox-core": "^7.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ec18f6..860918a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -95,6 +95,9 @@ importers:
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      unplugin-vue-router:
+        specifier: ^0.15.0
+        version: 0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       vue-tsc:
         specifier: ^3.1.0
         version: 3.1.0(typescript@5.9.3)
@@ -1475,6 +1478,15 @@ packages:
   '@volar/typescript@2.4.23':
     resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
 
+  '@vue-macros/common@3.0.0-beta.16':
+    resolution: {integrity: sha512-8O2gWxWFiaoNkk7PGi0+p7NPGe/f8xJ3/INUufvje/RZOs7sJvlI1jnR4lydtRFa/mU0ylMXUXXjSK0fHDEYTA==}
+    engines: {node: '>=20.18.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
   '@vue/compiler-core@3.5.22':
     resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
@@ -1574,6 +1586,14 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-kit@2.1.2:
+    resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
+    engines: {node: '>=20.18.0'}
+
+  ast-walker-scope@0.8.2:
+    resolution: {integrity: sha512-3pYeLyDZ6nJew9QeBhS4Nly02269Dkdk32+zdbbKmL6n4ZuaGorwwA+xx12xgOciA8BF1w9x+dlH7oUkFTW91w==}
+    engines: {node: '>=20.18.0'}
+
   astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
@@ -2495,6 +2515,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  magic-string-ast@1.0.2:
+    resolution: {integrity: sha512-8ngQgLhcT0t3YBdn9CGkZqCYlvwW9pm7aWJwd7AxseVWf1RU8ZHCQvG1mt3N5vvUme+pXTcHB8G/7fE666U8Vw==}
+    engines: {node: '>=20.18.0'}
+
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -3417,10 +3441,23 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unplugin-utils@0.2.5:
+    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
+    engines: {node: '>=18.12.0'}
+
   unplugin-utils@0.3.0:
     resolution: {integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==}
     engines: {node: '>=20.19.0'}
 
+  unplugin-vue-router@0.15.0:
+    resolution: {integrity: sha512-PyGehCjd9Ny9h+Uer4McbBjjib3lHihcyUEILa7pHKl6+rh8N7sFyw4ZkV+N30Oq2zmIUG7iKs3qpL0r+gXAaQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.5.17
+      vue-router: ^4.5.1
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+
   unplugin@2.3.10:
     resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
     engines: {node: '>=18.12.0'}
@@ -5199,6 +5236,16 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
+  '@vue-macros/common@3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.22
+      ast-kit: 2.1.2
+      local-pkg: 1.1.2
+      magic-string-ast: 1.0.2
+      unplugin-utils: 0.2.5
+    optionalDependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vue/compiler-core@3.5.22':
     dependencies:
       '@babel/parser': 7.28.4
@@ -5319,6 +5366,16 @@ snapshots:
   assertion-error@2.0.1:
     optional: true
 
+  ast-kit@2.1.2:
+    dependencies:
+      '@babel/parser': 7.28.4
+      pathe: 2.0.3
+
+  ast-walker-scope@0.8.2:
+    dependencies:
+      '@babel/parser': 7.28.4
+      ast-kit: 2.1.2
+
   astral-regex@2.0.0: {}
 
   async@3.2.6: {}
@@ -6248,6 +6305,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  magic-string-ast@1.0.2:
+    dependencies:
+      magic-string: 0.30.19
+
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -7356,11 +7417,41 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unplugin-utils@0.2.5:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
   unplugin-utils@0.3.0:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.3
 
+  unplugin-vue-router@0.15.0(@vue/compiler-sfc@3.5.22)(typescript@5.9.3)(vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      '@vue-macros/common': 3.0.0-beta.16(vue@3.5.22(typescript@5.9.3))
+      '@vue/compiler-sfc': 3.5.22
+      '@vue/language-core': 3.1.0(typescript@5.9.3)
+      ast-walker-scope: 0.8.2
+      chokidar: 4.0.3
+      json5: 2.2.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.19
+      mlly: 1.8.0
+      muggle-string: 0.4.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.2.5
+      yaml: 2.8.1
+    optionalDependencies:
+      vue-router: 4.5.1(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - typescript
+      - vue
+
   unplugin@2.3.10:
     dependencies:
       '@jridgewell/remapping': 2.3.5
diff --git a/src/components/event-card.vue b/src/components/event-card.vue
index 9ded74e..0a43b89 100644
--- a/src/components/event-card.vue
+++ b/src/components/event-card.vue
@@ -22,7 +22,7 @@
 import { Holiday, type SummoningDay } from "@/classes/Event";
 
 const props = defineProps<{ event: Holiday | SummoningDay }>();
-const routeName = props.event instanceof Holiday ? "Holiday" : "SummoningDay";
+const routeName = props.event instanceof Holiday ? "Holiday" : "Summoning Day";
 </script>
 <style lang="scss">
 .event-card {
diff --git a/src/components/main-nav.vue b/src/components/main-nav.vue
index 4cde5fc..6801a2f 100644
--- a/src/components/main-nav.vue
+++ b/src/components/main-nav.vue
@@ -23,6 +23,7 @@ import { useI18n } from "vue-i18n";
 import { RouterLink, useRouter } from "vue-router";
 import { IconMoon2 } from "@tabler/icons-vue";
 import { useSettingsStore } from "@/store/settings";
+import type { RouteNamedKeys } from "@/types/router";
 import IconCalendar from "./icons/icon-calendar.vue";
 import IconComet from "./icons/icon-comet.vue";
 import IconSettings from "./icons/icon-settings.vue";
@@ -30,7 +31,7 @@ import IconSettings from "./icons/icon-settings.vue";
 interface TabEntry {
   key: string
   title: string
-  pages: string[]
+  pages: RouteNamedKeys[]
   iconComponent: Component
 }
 
@@ -41,11 +42,11 @@ if (!settings.value.onboarding) router.push({ name: "Onboarding" });
 
 const currentRoute = computed(() => router.currentRoute.value.name?.toString() ?? "");
 
-const tabs = computed<readonly TabEntry[]>(() => [
+const tabs = computed<TabEntry[]>(() => [
   {
     key: "calendar",
     title: t("router.calendar"),
-    pages: ["Calendar", "Week", "Month", "Year", "Holiday", "SummoningDay"],
+    pages: ["Calendar", "Calendar Week", "Calendar Month", "Calendar Year", "Holiday", "Summoning Day"],
     iconComponent: IconCalendar
   },
   {
@@ -57,7 +58,7 @@ const tabs = computed<readonly TabEntry[]>(() => [
   {
     key: "constellations",
     title: t("router.constellations"),
-    pages: ["Constellations", "Constellation"],
+    pages: ["Constellations", "Constellations Month"],
     iconComponent: IconComet
   },
   {
diff --git a/src/views/CalendarView.vue b/src/pages/calendar.vue
similarity index 62%
rename from src/views/CalendarView.vue
rename to src/pages/calendar.vue
index 09ad243..e8b8df8 100644
--- a/src/views/CalendarView.vue
+++ b/src/pages/calendar.vue
@@ -1,27 +1,27 @@
 <template>
   <main ref="swipeContainerElement" class="calendar-view">
     <template v-if="isSwiping && ['left', 'right'].includes(direction)">
-      <div v-if="direction === 'right' && currentPageIndex > 0" :class="arrowClassList">
+      <div v-if="direction === 'right' && currentTabIndex > 0" :class="arrowClassList">
         <icon-chevron-left />
       </div>
-      <div v-if="direction === 'left' && currentPageIndex < calendarPages.length - 1" :class="arrowClassList">
+      <div v-if="direction === 'left' && currentTabIndex < tabs.length - 1" :class="arrowClassList">
         <icon-chevron-right />
       </div>
     </template>
     <common-header search>
       <ul class="tabs">
         <li>
-          <router-link :to="{ name: 'Week' }" replace class="tabs__tab" active-class="tabs__tab--active">
+          <router-link :to="{ name: 'Calendar Week' }" replace class="tabs__tab" active-class="tabs__tab--active">
             {{ $t("week") }}
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Month' }" replace class="tabs__tab" active-class="tabs__tab--active">
+          <router-link :to="{ name: 'Calendar Month' }" replace class="tabs__tab" active-class="tabs__tab--active">
             {{ $t("month") }}
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'Year' }" replace class="tabs__tab" active-class="tabs__tab--active">
+          <router-link :to="{ name: 'Calendar Year' }" replace class="tabs__tab" active-class="tabs__tab--active">
             {{ $t("year") }}
           </router-link>
         </li>
@@ -37,25 +37,41 @@
 <script setup lang="ts">
 import { computed, useTemplateRef, watch } from "vue";
 import { useSwipe, type UseSwipeDirection } from "@vueuse/core";
-import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
+import { RouterLink, RouterView, useRouter } from "vue-router";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-vue";
 import { useSettingsStore } from "@/store/settings";
+import type { RouteNamedKeys } from "@/types/router";
 import CommonHeader from "@/components/common-header.vue";
 
-const route = useRoute();
+definePage({
+  meta: { titleToken: "router.calendar" },
+  redirect: { name: "Calendar Week" },
+  beforeEnter(to, _from, next) {
+    const { selectedCalendar } = useSettingsStore();
+    if (selectedCalendar.value && to.name !== selectedCalendar.value) {
+      next({ name: selectedCalendar.value });
+    } else {
+      next();
+    }
+  }
+});
+
 const router = useRouter();
 const { settings, selectedCalendar } = useSettingsStore();
 
-const calendarPages = route.matched[0].children.map(({ name }) => name);
-
-const currentPageIndex = computed(() => calendarPages.indexOf(router.currentRoute.value.name ?? ""));
+const tabs = ["Calendar Week", "Calendar Month", "Calendar Year"] as const satisfies readonly RouteNamedKeys[];
+function navigateToTab(tabIndex: number): void {
+  const name = tabs[tabIndex];
+  router.replace({ name });
+}
+const currentTabIndex = computed(() => tabs.indexOf(router.currentRoute.value.name));
 const swipeContainerRef = useTemplateRef("swipeContainerElement");
 const { isSwiping, direction } = useSwipe(swipeContainerRef, {
   onSwipeEnd: (_: TouchEvent, swipeDirection: UseSwipeDirection) => {
-    if (swipeDirection === "right" && currentPageIndex.value > 0) {
-      navigateToPage(currentPageIndex.value - 1);
-    } else if (swipeDirection === "left" && currentPageIndex.value < calendarPages.length - 1) {
-      navigateToPage(currentPageIndex.value + 1);
+    if (swipeDirection === "right" && currentTabIndex.value > 0) {
+      navigateToTab(currentTabIndex.value - 1);
+    } else if (swipeDirection === "left" && currentTabIndex.value < tabs.length - 1) {
+      navigateToTab(currentTabIndex.value + 1);
     }
   }
 });
@@ -68,13 +84,8 @@ const arrowClassList = computed<Record<string, boolean>>(() => {
 });
 
 watch(router.currentRoute, ({ name }) => {
-  if (calendarPages.includes(name)) selectedCalendar.value = name;
+  if (tabs.includes(name)) selectedCalendar.value = name;
 });
-
-function navigateToPage(pageIndex: number): void {
-  const name = calendarPages[pageIndex];
-  router.push({ name });
-}
 </script>
 <style lang="scss">
 .calendar-view {
diff --git a/src/views/calendar/MonthView.vue b/src/pages/calendar/month.vue
similarity index 94%
rename from src/views/calendar/MonthView.vue
rename to src/pages/calendar/month.vue
index feff6cd..335e35f 100644
--- a/src/views/calendar/MonthView.vue
+++ b/src/pages/calendar/month.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { computed, reactive } from "vue";
 import { useInfiniteScroll } from "@vueuse/core";
-import type { RouteLocationRaw } from "vue-router";
+import type { RouterLinkProps } from "vue-router";
 import type { Dayjs } from "dayjs";
 import { Month } from "@/classes/Month";
 import { currentDay } from "@/helpers/date";
@@ -57,11 +57,11 @@ function canLoadMore(): boolean {
 }
 useInfiniteScroll(document, appendMonth, { distance: 150, canLoadMore });
 
-function composeEventLink(day: Day): RouteLocationRaw {
+function composeEventLink(day: Day): RouterLinkProps["to"] {
   if (day.holiday) {
     return { name: "Holiday", query: { date: day.holiday.date } };
   } else if (day.summoningDay) {
-    return { name: "SummoningDay", query: { date: day.summoningDay.date } };
+    return { name: "Summoning Day", query: { date: day.summoningDay.date } };
   }
   return {};
 }
diff --git a/src/views/calendar/WeekView.vue b/src/pages/calendar/week.vue
similarity index 100%
rename from src/views/calendar/WeekView.vue
rename to src/pages/calendar/week.vue
diff --git a/src/views/calendar/YearView.vue b/src/pages/calendar/year.vue
similarity index 100%
rename from src/views/calendar/YearView.vue
rename to src/pages/calendar/year.vue
diff --git a/src/views/ConstellationView.vue b/src/pages/constellations/[month].vue
similarity index 95%
rename from src/views/ConstellationView.vue
rename to src/pages/constellations/[month].vue
index 39a3375..ed5b721 100644
--- a/src/views/ConstellationView.vue
+++ b/src/pages/constellations/[month].vue
@@ -39,7 +39,9 @@ import head from "@/plugins/head";
 import { useEventsStore } from "@/store/events";
 import CommonHeader from "@/components/common-header.vue";
 
-const route = useRoute();
+definePage({ meta: { titleToken: "router.constellation" } });
+
+const route = useRoute("Constellations Month");
 const { constellations } = useEventsStore();
 const constellation = computed(() => constellations.get(route.params.month?.toString()));
 
diff --git a/src/views/ConstellationsView.vue b/src/pages/constellations/index.vue
similarity index 91%
rename from src/views/ConstellationsView.vue
rename to src/pages/constellations/index.vue
index bb27745..41665ba 100644
--- a/src/views/ConstellationsView.vue
+++ b/src/pages/constellations/index.vue
@@ -9,7 +9,7 @@
           v-for="sign in constellations.values()"
           :key="sign.name"
           v-slot="{ navigate }"
-          :to="{ name: 'Constellation', params: { month: sign.date } }"
+          :to="{ name: 'Constellations Month', params: { month: sign.date } }"
           custom
         >
           <li role="link" @click="navigate">
@@ -26,6 +26,8 @@ import { RouterLink } from "vue-router";
 import { useEventsStore } from "@/store/events";
 import CommonHeader from "@/components/common-header.vue";
 
+definePage({ meta: { titleToken: "router.constellations" } });
+
 const { constellations: data } = useEventsStore();
 const constellations = [...data.values()].sort((a, b) => Number(a.date) - Number(b.date));
 </script>
diff --git a/src/views/HolidayView.vue b/src/pages/holiday.vue
similarity index 95%
rename from src/views/HolidayView.vue
rename to src/pages/holiday.vue
index 4161588..233f584 100644
--- a/src/views/HolidayView.vue
+++ b/src/pages/holiday.vue
@@ -38,7 +38,9 @@ import head from "@/plugins/head";
 import { useEventsStore } from "@/store/events";
 import CommonHeader from "@/components/common-header.vue";
 
-const route = useRoute();
+definePage({ meta: { titleToken: "router.holiday" } });
+
+const route = useRoute("Holiday");
 const date = route.query.date?.toString();
 const { holidays } = useEventsStore();
 const event = computed(() => (date ? holidays.get(date) : null));
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..4b7019e
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts">
+definePage({ name: "Home", redirect: { name: "Calendar", params: {} } });
+</script>
diff --git a/src/views/MoonPhaseView.vue b/src/pages/moon-phase.vue
similarity index 97%
rename from src/views/MoonPhaseView.vue
rename to src/pages/moon-phase.vue
index dcb2503..46ba827 100644
--- a/src/views/MoonPhaseView.vue
+++ b/src/pages/moon-phase.vue
@@ -28,6 +28,8 @@ import { computed } from "vue";
 import { currentDayOfYear } from "@/helpers/date";
 import CommonHeader from "@/components/common-header.vue";
 
+definePage({ meta: { titleToken: "router.moonPhase" } });
+
 enum MoonPhase {
   newMoon = 0,
   oneWax,
diff --git a/src/views/OnboardingView.vue b/src/pages/onboarding.vue
similarity index 95%
rename from src/views/OnboardingView.vue
rename to src/pages/onboarding.vue
index 946687a..52c4bd4 100644
--- a/src/views/OnboardingView.vue
+++ b/src/pages/onboarding.vue
@@ -13,6 +13,8 @@ import { useRouter } from "vue-router";
 import { useHead } from "@unhead/vue";
 import { useSettingsStore } from "@/store/settings";
 
+definePage({ meta: { titleToken: "router.onboarding" } });
+
 const router = useRouter();
 const { settings } = useSettingsStore();
 function exitOnboarding(): void {
diff --git a/src/views/SearchView.vue b/src/pages/search.vue
similarity index 96%
rename from src/views/SearchView.vue
rename to src/pages/search.vue
index 74a8857..667bd24 100644
--- a/src/views/SearchView.vue
+++ b/src/pages/search.vue
@@ -26,6 +26,8 @@ import { useSearchStore } from "@/store/search";
 import CommonHeader from "../components/common-header.vue";
 import EventCard from "../components/event-card.vue";
 
+definePage({ meta: { titleToken: "router.search" } });
+
 const { holidaysEntries, summoningDaysEntries } = useSearchStore();
 </script>
 <style lang="scss">
diff --git a/src/views/SettingsView.vue b/src/pages/settings.vue
similarity index 98%
rename from src/views/SettingsView.vue
rename to src/pages/settings.vue
index b4cf02d..8e3e319 100644
--- a/src/views/SettingsView.vue
+++ b/src/pages/settings.vue
@@ -54,6 +54,8 @@ import head from "@/plugins/head";
 import { useSettingsStore } from "@/store/settings";
 import CommonHeader from "@/components/common-header.vue";
 
+definePage({ meta: { titleToken: "router.settings" } });
+
 const { VITE_GIT_COMMIT_HASH, VITE_GIT_COMMIT_DATE } = import.meta.env;
 
 const { LOCALES, settings, setLocale, setColorTheme, needRefresh, updateServiceWorker } = useSettingsStore();
diff --git a/src/views/SummoningDayView.vue b/src/pages/summoning-day.vue
similarity index 95%
rename from src/views/SummoningDayView.vue
rename to src/pages/summoning-day.vue
index 2c73742..2d5209e 100644
--- a/src/views/SummoningDayView.vue
+++ b/src/pages/summoning-day.vue
@@ -39,7 +39,9 @@ import head from "@/plugins/head";
 import { useEventsStore } from "@/store/events";
 import CommonHeader from "@/components/common-header.vue";
 
-const route = useRoute();
+definePage({ meta: { titleToken: "router.summoningDay" } });
+
+const route = useRoute("Summoning Day");
 const date = route.query.date?.toString();
 const { summoningDays } = useEventsStore();
 const event = computed(() => (date ? summoningDays.get(date) : null));
diff --git a/src/plugins/router.ts b/src/plugins/router.ts
index 418b28f..5f42363 100644
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@@ -1,117 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
+import { routes } from "vue-router/auto-routes";
 import { composeTitle } from "@/helpers/router";
 import { i18n } from "@/plugins/i18n";
 import { useSettingsStore } from "@/store/settings";
 
-const OnboardingView = () => import("@/views/OnboardingView.vue");
-const SearchView = () => import("@/views/SearchView.vue");
-
-const CalendarView = () => import("@/views/CalendarView.vue");
-const WeekView = () => import("@/views/calendar/WeekView.vue");
-const MonthView = () => import("@/views/calendar/MonthView.vue");
-const YearView = () => import("@/views/calendar/YearView.vue");
-
-const HolidayView = () => import("@/views/HolidayView.vue");
-const SummoningDayView = () => import("@/views/SummoningDayView.vue");
-const ConstellationsView = () => import("@/views/ConstellationsView.vue");
-const ConstellationView = () => import("@/views/ConstellationView.vue");
-const MoonPhaseView = () => import("@/views/MoonPhaseView.vue");
-
-const SettingsView = () => import("@/views/SettingsView.vue");
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: "/",
-      name: "Home",
-      redirect: { name: "Calendar" }
-    },
-    {
-      path: "/onboarding",
-      name: "Onboarding",
-      component: OnboardingView,
-      meta: { titleToken: "router.onboarding" }
-    },
-    {
-      path: "/search",
-      name: "Search",
-      component: SearchView,
-      meta: { titleToken: "router.search" }
-    },
-    {
-      path: "/calendar",
-      name: "Calendar",
-      component: CalendarView,
-      meta: { titleToken: "router.calendar" },
-      redirect: { name: "Week" },
-      beforeEnter(to, _from, next) {
-        const { selectedCalendar } = useSettingsStore();
-        if (selectedCalendar.value && to.name !== selectedCalendar.value) {
-          next({ name: selectedCalendar.value });
-        } else {
-          next();
-        }
-      },
-      children: [
-        {
-          path: "/calendar/week",
-          name: "Week",
-          component: WeekView
-        },
-        {
-          path: "/calendar/month",
-          name: "Month",
-          component: MonthView
-        },
-        {
-          path: "/calendar/year",
-          name: "Year",
-          component: YearView
-        }
-      ]
-    },
-    {
-      path: "/calendar/holiday",
-      name: "Holiday",
-      component: HolidayView,
-      meta: { titleToken: "router.holiday" }
-    },
-    {
-      path: "/calendar/summoning-day",
-      name: "SummoningDay",
-      component: SummoningDayView,
-      meta: { titleToken: "router.summoningDay" }
-    },
-    {
-      path: "/moon-phase",
-      name: "Moon Phase",
-      component: MoonPhaseView,
-      meta: { titleToken: "router.moonPhase" }
-    },
-    {
-      path: "/constellations",
-      name: "Constellations",
-      component: ConstellationsView,
-      meta: { titleToken: "router.constellations" }
-    },
-    {
-      path: "/constellations/:month",
-      name: "Constellation",
-      component: ConstellationView,
-      meta: { titleToken: "router.constellation" }
-    },
-    {
-      path: "/settings",
-      name: "Settings",
-      component: SettingsView,
-      meta: { titleToken: "router.settings" }
-    },
-    {
-      path: "/:pathMatch(.*)*",
-      redirect: { name: "Home", params: {} }
-    }
-  ],
+  routes,
   scrollBehavior(_to, _from, savedPosition) {
     return Promise.resolve(savedPosition ?? { top: 0, left: 0 });
   }
diff --git a/src/types/router.ts b/src/types/router.ts
index d8309e9..719a6fa 100644
--- a/src/types/router.ts
+++ b/src/types/router.ts
@@ -1,7 +1,10 @@
 import "vue-router";
+import type { RouteNamedMap } from "vue-router/auto-routes";
 
 declare module "vue-router" {
   interface RouteMeta {
     titleToken?: string
   }
 }
+
+export type RouteNamedKeys = keyof RouteNamedMap;
diff --git a/src/types/typed-router.ts b/src/types/typed-router.ts
new file mode 100644
index 0000000..43c34ec
--- /dev/null
+++ b/src/types/typed-router.ts
@@ -0,0 +1,111 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    'Home': RouteRecordInfo<'Home', '/', Record<never, never>, Record<never, never>>,
+    'Calendar': RouteRecordInfo<'Calendar', '/calendar', Record<never, never>, Record<never, never>, 'Calendar Month' | 'Calendar Week' | 'Calendar Year'>,
+    'Calendar Month': RouteRecordInfo<'Calendar Month', '/calendar/month', Record<never, never>, Record<never, never>>,
+    'Calendar Week': RouteRecordInfo<'Calendar Week', '/calendar/week', Record<never, never>, Record<never, never>>,
+    'Calendar Year': RouteRecordInfo<'Calendar Year', '/calendar/year', Record<never, never>, Record<never, never>>,
+    'Constellations': RouteRecordInfo<'Constellations', '/constellations', Record<never, never>, Record<never, never>>,
+    'Constellations Month': RouteRecordInfo<'Constellations Month', '/constellations/:month', { month: ParamValue<true> }, { month: ParamValue<false> }>,
+    'Holiday': RouteRecordInfo<'Holiday', '/holiday', Record<never, never>, Record<never, never>>,
+    'Moon Phase': RouteRecordInfo<'Moon Phase', '/moon-phase', Record<never, never>, Record<never, never>>,
+    'Onboarding': RouteRecordInfo<'Onboarding', '/onboarding', Record<never, never>, Record<never, never>>,
+    'Search': RouteRecordInfo<'Search', '/search', Record<never, never>, Record<never, never>>,
+    'Settings': RouteRecordInfo<'Settings', '/settings', Record<never, never>, Record<never, never>>,
+    'Summoning Day': RouteRecordInfo<'Summoning Day', '/summoning-day', Record<never, never>, Record<never, never>>,
+  }
+
+  /**
+   * Route file to route info map by unplugin-vue-router.
+   * Used by the volar plugin to automatically type useRoute()
+   *
+   * Each key is a file path relative to the project root with 2 properties:
+   * - routes: union of route names of the possible routes when in this page (passed to useRoute<...>())
+   * - views: names of nested views (can be passed to <RouterView name="...">)
+   *
+   * @internal
+   */
+  export interface _RouteFileInfoMap {
+    'src/pages/index.vue': {
+      routes: 'Home'
+      views: never
+    }
+    'src/pages/calendar.vue': {
+      routes: 'Calendar' | 'Calendar Month' | 'Calendar Week' | 'Calendar Year'
+      views: 'default'
+    }
+    'src/pages/calendar/month.vue': {
+      routes: 'Calendar Month'
+      views: never
+    }
+    'src/pages/calendar/week.vue': {
+      routes: 'Calendar Week'
+      views: never
+    }
+    'src/pages/calendar/year.vue': {
+      routes: 'Calendar Year'
+      views: never
+    }
+    'src/pages/constellations/index.vue': {
+      routes: 'Constellations'
+      views: never
+    }
+    'src/pages/constellations/[month].vue': {
+      routes: 'Constellations Month'
+      views: never
+    }
+    'src/pages/holiday.vue': {
+      routes: 'Holiday'
+      views: never
+    }
+    'src/pages/moon-phase.vue': {
+      routes: 'Moon Phase'
+      views: never
+    }
+    'src/pages/onboarding.vue': {
+      routes: 'Onboarding'
+      views: never
+    }
+    'src/pages/search.vue': {
+      routes: 'Search'
+      views: never
+    }
+    'src/pages/settings.vue': {
+      routes: 'Settings'
+      views: never
+    }
+    'src/pages/summoning-day.vue': {
+      routes: 'Summoning Day'
+      views: never
+    }
+  }
+
+  /**
+   * Get a union of possible route names in a certain route component file.
+   * Used by the volar plugin to automatically type useRoute()
+   *
+   * @internal
+   */
+  export type _RouteNamesForFilePath<FilePath extends string> =
+    _RouteFileInfoMap extends Record<FilePath, infer Info>
+      ? Info['routes']
+      : keyof RouteNamedMap
+}
diff --git a/tsconfig.json b/tsconfig.json
index c85c32d..799cbf9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "moduleResolution": "bundler",
     "paths": { "@/*": ["./src/*"] },
     "resolveJsonModule": true,
-    "types": ["vite/client", "vite-plugin-pwa/client"],
+    "types": ["vite/client", "vite-plugin-pwa/client", "unplugin-vue-router/client"],
     "strict": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
diff --git a/vite.config.ts b/vite.config.ts
index 5b66d87..4b46317 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,37 @@
 import { execSync } from "node:child_process";
 import { fileURLToPath, URL } from "node:url";
 import Vue from "@vitejs/plugin-vue";
+import VueRouter from "unplugin-vue-router/vite";
 import { defineConfig } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
+import type { TreeNode } from "unplugin-vue-router";
 import PWA_OPTIONS from "./src/constants/pwa-options";
 
 const commitHash = execSync("git rev-parse --short HEAD").toString().trimEnd();
 const commitDate = execSync("git log -1 --format=%cd --date=\"format:%Y, %b %d\"").toString().trimEnd();
 
+function getRouteName(node: TreeNode): string {
+  if (!node.parent) return "";
+
+  const { rawSegment } = node.value;
+  const parentName = getRouteName(node.parent);
+  if (rawSegment === "index") return parentName;
+
+  const name = rawSegment
+    .replace(/[-[\]]+/g, " ") // replace -[] with space
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+
+  if (!parentName) { return name; }
+  return `${parentName} ${name}`;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
+    VueRouter({ dts: "./src/types/typed-router.ts", getRouteName }),
     Vue(),
     VitePWA(PWA_OPTIONS)
   ],