typed router

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",

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",

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 {

src/components/main-nav.vue

@@ -23,14 +23,15 @@ 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";
 
 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
   },
   {

src/views/CalendarView.vue → 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 {

src/views/calendar/MonthView.vue → 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 {};
 }

src/views/ConstellationView.vue → 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()));
 

src/views/ConstellationsView.vue → 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>

src/views/HolidayView.vue → 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));

src/pages/index.vue

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