chore: upgrade to unplug-vue-router (#3041)

assets/auto-imports.d.ts

@@ -5,8 +5,8 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const $: typeof import('vue/macros')['$']
   const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
   const $computed: typeof import('vue/macros')['$computed']
   const $customRef: typeof import('vue/macros')['$customRef']
   const $ref: typeof import('vue/macros')['$ref']
@@ -27,7 +27,6 @@ declare global {
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const config: typeof import('./stores/config')['default']
-  const containerContext: typeof import('./composable/containerContext')['containerContext']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
@@ -46,6 +45,7 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const defineStore: typeof import('pinia')['defineStore']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
@@ -84,8 +84,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
   const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
@@ -105,7 +105,6 @@ declare global {
   const persistentVisibleKeysForContainer: typeof import('./composable/storage')['persistentVisibleKeysForContainer']
   const pinnedContainers: typeof import('./composable/storage')['pinnedContainers']
   const provide: typeof import('vue')['provide']
-  const provideContainerContext: typeof import('./composable/containerContext')['provideContainerContext']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const provideLoggingContext: typeof import('./composable/logContext')['provideLoggingContext']
   const reactify: typeof import('@vueuse/core')['reactify']
@@ -190,7 +189,6 @@ declare global {
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useContainerActions: typeof import('./composable/containerActions')['useContainerActions']
-  const useContainerContext: typeof import('./composable/containerContext')['useContainerContext']
   const useContainerStore: typeof import('./stores/container')['useContainerStore']
   const useContainerStream: typeof import('./composable/eventStreams')['useContainerStream']
   const useCounter: typeof import('@vueuse/core')['useCounter']
@@ -244,7 +242,6 @@ declare global {
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLink: typeof import('vue-router')['useLink']
   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
   const useLogSearchContext: typeof import('./composable/logSearchContext')['useLogSearchContext']
   const useLoggingContext: typeof import('./composable/logContext')['useLoggingContext']
@@ -286,8 +283,8 @@ declare global {
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useReleases: typeof import('./stores/releases')['useReleases']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useRoute: typeof import('vue-router')['useRoute']
+  const useRoute: typeof import('vue-router/auto')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
+  const useRouter: typeof import('vue-router/auto')['useRouter']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -413,6 +410,7 @@ declare module 'vue' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['definePage']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
@@ -451,8 +449,8 @@ declare module 'vue' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -609,7 +607,6 @@ declare module 'vue' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
     readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
@@ -651,8 +648,8 @@ declare module 'vue' {
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
@@ -771,6 +768,7 @@ declare module '@vue/runtime-core' {
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['definePage']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
@@ -809,8 +807,8 @@ declare module '@vue/runtime-core' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
@@ -967,7 +965,6 @@ declare module '@vue/runtime-core' {
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
     readonly useLogSearchContext: UnwrapRef<typeof import('./composable/logSearchContext')['useLogSearchContext']>
     readonly useLoggingContext: UnwrapRef<typeof import('./composable/logContext')['useLoggingContext']>
@@ -1009,8 +1006,8 @@ declare module '@vue/runtime-core' {
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useReleases: UnwrapRef<typeof import('./stores/releases')['useReleases']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

assets/components/ContainerTable.vue

@@ -66,7 +66,7 @@
     <tbody>
       <tr v-for="container in paginated" :key="container.id">
         <td v-if="isVisible('name')">
-          <router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
+          <router-link :to="{ name: '/container/[id]', params: { id: container.id } }" :title="container.name">
             {{ container.name }}
           </router-link>
         </td>

assets/components/FuzzySearchModal.spec.ts

@@ -75,6 +75,6 @@ describe("<FuzzySearchModal />", () => {
     const wrapper = createFuzzySearchModal();
     await wrapper.find("input").setValue("baz");
     await wrapper.find("input").trigger("keydown.enter");
-    expect(useRouter().push).toHaveBeenCalledWith({ name: "container-id", params: { id: "567" } });
+    expect(useRouter().push).toHaveBeenCalledWith({ name: "/container/[id]", params: { id: "567" } });
   });
 });

assets/components/FuzzySearchModal.vue

@@ -166,11 +166,11 @@ useFocus(input, { initialValue: true });
 
 function selected(item: Item) {
   if (item.type === "container") {
-    router.push({ name: "container-id", params: { id: item.id } });
+    router.push({ name: "/container/[id]", params: { id: item.id } });
   } else if (item.type === "service") {
-    router.push({ name: "service-name", params: { name: item.id } });
+    router.push({ name: "/service/[name]", params: { name: item.id } });
   } else if (item.type === "stack") {
-    router.push({ name: "stack-name", params: { name: item.id } });
+    router.push({ name: "/stack/[name]", params: { name: item.id } });
   }
   close();
 }

assets/components/HostMenu.vue

@@ -33,7 +33,7 @@
 
               <router-link
                 :to="{
-                  name: 'merged-name',
+                  name: '/merged/[name]',
                   query: { id: containers.map(({ id }) => id) },
                   params: { name: label.replace('label.', '') },
                 }"
@@ -48,7 +48,7 @@
               <li v-for="item in containers" :class="item.state" :key="item.id">
                 <Popup>
                   <router-link
-                    :to="{ name: 'container-id', params: { id: item.id } }"
+                    :to="{ name: '/container/[id]', params: { id: item.id } }"
                     active-class="active-primary"
                     @click.alt.stop.prevent="pinnedStore.pinContainer(item)"
                     :title="item.name"

assets/components/Links.vue

@@ -16,7 +16,7 @@
     </Dropdown>
 
     <router-link
-      :to="{ name: 'settings' }"
+      :to="{ name: '/settings' }"
       :aria-label="$t('title.settings')"
       data-testid="settings"
       class="btn btn-circle btn-sm"

assets/components/LogViewer/ContainerEventLogItem.vue

@@ -17,7 +17,7 @@
           $t("button.cancel")
         }}</TimedButton>
         <router-link
-          :to="{ name: 'container-id', params: { id: nextContainer.id } }"
+          :to="{ name: '/container/[id]', params: { id: nextContainer.id } }"
           class="btn btn-primary btn-sm"
           v-else
         >
@@ -59,7 +59,7 @@ const nextContainer = computed(
 
 const followEligible = computed(
   () =>
-    router.currentRoute.value.name === "container-id" &&
+    router.currentRoute.value.name === "/container/[id]" &&
     logEntry.event === "container-stopped" &&
     containers.value.length === 1 &&
     nextContainer.value !== undefined,
@@ -74,7 +74,7 @@ function redirectNow() {
     },
     { expire: 5000 },
   );
-  router.push({ name: "container-id", params: { id: nextContainer.value?.id } });
+  router.push({ name: "/container/[id]", params: { id: nextContainer.value?.id } });
 }
 </script>
 

assets/components/SidePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
     <h1>
-      <router-link :to="{ name: 'index' }">
+      <router-link :to="{ name: '/' }">
         <svg class="h-14 w-28 fill-secondary">
           <use href="#logo"></use>
         </svg>

assets/components/SwarmMenu.vue

@@ -7,7 +7,7 @@
           {{ name }}
 
           <router-link
-            :to="{ name: 'stack-name', params: { name } }"
+            :to="{ name: '/stack/[name]', params: { name } }"
             class="btn btn-square btn-outline btn-primary btn-xs"
             active-class="btn-active"
             :title="$t('tooltip.merge-services')"
@@ -17,7 +17,10 @@
         </summary>
         <ul>
           <li v-for="service in services" :key="service.name">
-            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+            <router-link
+              :to="{ name: '/service/[name]', params: { name: service.name } }"
+              active-class="active-primary"
+            >
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -36,7 +39,10 @@
         </summary>
         <ul>
           <li v-for="service in serivcesWithoutStacks" :key="service.name">
-            <router-link :to="{ name: 'service-name', params: { name: service.name } }" active-class="active-primary">
+            <router-link
+              :to="{ name: '/service/[name]', params: { name: service.name } }"
+              active-class="active-primary"
+            >
               <ph:stack-simple />
               <div class="truncate">
                 {{ service.name }}
@@ -55,7 +61,7 @@
         </summary>
         <ul>
           <li v-for="group in customGroups" :key="group.name">
-            <router-link :to="{ name: 'group-name', params: { name: group.name } }" active-class="active-primary">
+            <router-link :to="{ name: '/group/[name]', params: { name: group.name } }" active-class="active-primary">
               <ph:stack-simple />
               <div class="truncate">
                 {{ group.name }}

assets/components/common/MobileMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="fixed top-0 z-10 w-full border-b border-base-content/20 bg-base p-2" data-testid="navigation">
     <div class="flex items-center">
-      <router-link :to="{ name: 'index' }">
+      <router-link :to="{ name: '/' }">
         <svg class="h-14 w-28 fill-secondary">
           <use href="#logo"></use>
         </svg>
@@ -35,7 +35,7 @@
           <li class="menu-title">{{ $t("label.containers") }}</li>
           <li v-for="item in sortedContainers" :key="item.id" :class="item.state">
             <router-link
-              :to="{ name: 'container-id', params: { id: item.id } }"
+              :to="{ name: '/container/[id]', params: { id: item.id } }"
               active-class="active-primary"
               class="truncate"
               :title="item.name"

assets/modules/router.ts

@@ -1,12 +1,11 @@
 import { type App } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
-import pages from "~pages";
+import { routes } from "vue-router/auto-routes";
 import { setupLayouts } from "virtual:generated-layouts";
 
-const routes = setupLayouts(pages);
 export const router = createRouter({
   history: createWebHistory(withBase("/")),
-  routes,
+  routes: setupLayouts(routes),
 });
 
 export const install = (app: App) => {

assets/pages/container/[id].vue

@@ -11,10 +11,11 @@
 </template>
 
 <script lang="ts" setup>
-const { id } = defineProps<{ id: string }>();
+const route = useRoute("/container/[id]");
+const id = toRef(() => route.params.id);
 
 const containerStore = useContainerStore();
-const currentContainer = containerStore.currentContainer($$(id));
+const currentContainer = containerStore.currentContainer(id);
 const { ready } = storeToRefs(containerStore);
 
 const pinnedLogsStore = usePinnedLogsStore();

assets/pages/group/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <GroupedLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <GroupedLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/group/[name]");
 
 const swarmStore = useSwarmStore();
 const { customGroups } = storeToRefs(swarmStore);
@@ -12,7 +12,7 @@ const { customGroups } = storeToRefs(swarmStore);
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
-const group = computed(() => customGroups.value.find((g) => g.name === name));
+const group = computed(() => customGroups.value.find((g) => g.name === route.params.name));
 
 watchEffect(() => {
   if (group.value?.name) {

assets/pages/merged/[name].vue

@@ -7,7 +7,7 @@
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
 
-const route = useRoute();
+const route = useRoute("/merged/[name]");
 
 const pinnedLogsStore = usePinnedLogsStore();
 const { pinnedLogs } = storeToRefs(pinnedLogsStore);

assets/pages/service/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <ServiceLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <ServiceLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/service/[name]");
 
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
@@ -14,7 +14,7 @@ const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const stackStore = useSwarmStore();
 const { services } = storeToRefs(stackStore);
-const service = computed(() => services.value.find((s) => s.name === name));
+const service = computed(() => services.value.find((s) => s.name === route.params.name));
 
 watchEffect(() => {
   if (ready.value) {

assets/pages/show.vue

@@ -10,14 +10,14 @@ watch(visibleContainers, (newValue) => {
     if (route.query.name) {
       const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
       if (container) {
-        router.push({ name: "container-id", params: { id: container.id } });
+        router.push({ name: "/container/[id]", params: { id: container.id } });
       } else {
         console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
-        router.push({ name: "index" });
+        router.push({ name: "/" });
       }
     } else {
       console.error(`Expection query parameter name to be set. Redirecting to /`);
-      router.push({ name: "index" });
+      router.push({ name: "/" });
     }
   }
 });

assets/pages/stack/[name].vue

@@ -1,10 +1,10 @@
 <template>
   <Search />
-  <StackLog :name="name" :scrollable="pinnedLogs.length > 0" />
+  <StackLog :name="route.params.name" :scrollable="pinnedLogs.length > 0" />
 </template>
 
 <script lang="ts" setup>
-const { name } = defineProps<{ name: string }>();
+const route = useRoute("/stack/[name]");
 
 const containerStore = useContainerStore();
 const { ready } = storeToRefs(containerStore);
@@ -14,7 +14,7 @@ const { pinnedLogs } = storeToRefs(pinnedLogsStore);
 
 const stackStore = useSwarmStore();
 const { stacks } = storeToRefs(stackStore);
-const stack = computed(() => stacks.value.find((s) => s.name === name));
+const stack = computed(() => stacks.value.find((s) => s.name === route.params.name));
 
 watchEffect(() => {
   if (ready.value) {

assets/typed-router.d.ts

@@ -0,0 +1,32 @@
+/* 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 'unplugin-vue-router/types'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+    '/container/[id]': RouteRecordInfo<'/container/[id]', '/container/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/group/[name]': RouteRecordInfo<'/group/[name]', '/group/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
+    '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/merged/[name]': RouteRecordInfo<'/merged/[name]', '/merged/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
+    '/service/[name]': RouteRecordInfo<'/service/[name]', '/service/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
+    '/settings': RouteRecordInfo<'/settings', '/settings', Record<never, never>, Record<never, never>>,
+    '/show': RouteRecordInfo<'/show', '/show', Record<never, never>, Record<never, never>>,
+    '/stack/[name]': RouteRecordInfo<'/stack/[name]', '/stack/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
+  }
+}

package.json

@@ -31,6 +31,7 @@
   "@iconify-json/carbon": "^1.1.35",
   "@iconify-json/cil": "^1.1.8",
   "@iconify-json/ic": "^1.1.17",
+  "@iconify-json/material-symbols": "^1.1.82",
   "@iconify-json/mdi": "^1.1.66",
   "@iconify-json/mdi-light": "^1.1.10",
   "@iconify-json/octicon": "^1.1.54",
@@ -64,16 +65,16 @@
   "unplugin-icons": "^0.19.0",
   "unplugin-vue-components": "^0.27.0",
   "unplugin-vue-macros": "^2.9.5",
+  "unplugin-vue-router": "^0.9.1",
   "vite": "5.3.1",
+  "vitepress": "1.2.3",
   "vite-plugin-compression2": "^1.1.1",
-  "vite-plugin-pages": "^0.32.2",
   "vite-plugin-vue-layouts": "^0.11.0",
   "vue": "^3.4.29",
   "vue-i18n": "^9.13.1",
   "vue-router": "^4.3.3"
  },
  "devDependencies": {
-  "@iconify-json/material-symbols": "^1.1.82",
   "@pinia/testing": "^0.1.3",
   "@playwright/test": "^1.44.1",
   "@types/d3-array": "^3.2.1",
@@ -98,7 +99,6 @@
   "simple-git-hooks": "^2.11.1",
   "ts-node": "^10.9.2",
   "typescript": "^5.4.5",
-  "vitepress": "1.2.3",
   "vitest": "^1.6.0",
   "vue-component-type-helpers": "^2.0.21",
   "vue-tsc": "^2.0.21"

tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "incremental": false,
     "skipLibCheck": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
@@ -20,12 +20,11 @@
     "types": [
       "vitest",
       "vite/client",
-      "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client",
-      "unplugin-vue-macros/macros-global"
+      "unplugin-vue-macros/macros-global",
+      "unplugin-vue-router/client"
     ]
   },
-  "include": ["assets/**/*.ts", "assets/**/*.d.ts", "assets/**/*.vue"],
 
-  "exclude": ["dist", "node_modules"]
+  "exclude": ["dist", "node_modules", "e2e"]
 }

vite.config.ts

@@ -6,10 +6,11 @@ import Icons from "unplugin-icons/vite";
 import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
 import IconsResolver from "unplugin-icons/resolver";
-import Pages from "vite-plugin-pages";
+import VueRouter from "unplugin-vue-router/vite";
 import Layouts from "vite-plugin-vue-layouts";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import { compression } from "vite-plugin-compression2";
+import { VueRouterAutoImports } from "unplugin-vue-router";
 
 export default defineConfig(() => ({
   resolve: {
@@ -32,13 +33,17 @@ export default defineConfig(() => ({
         vue: Vue(),
       },
     }),
+    VueRouter({
+      routesFolder: {
+        src: "./assets/pages",
+      },
+      dts: "./assets/typed-router.d.ts",
+      importMode: "sync",
+    }),
     Icons({
       autoInstall: true,
     }),
-    Pages({
+
-      dirs: "assets/pages",
-      importMode: "sync",
-    }),
     Layouts({
       layoutsDirs: "assets/layouts",
     }),
@@ -53,7 +58,7 @@ export default defineConfig(() => ({
       dts: "assets/components.d.ts",
     }),
     AutoImport({
-      imports: ["vue", "vue-router", "vue-i18n", "vue/macros", "pinia", "@vueuse/head", "@vueuse/core"],
+      imports: ["vue", VueRouterAutoImports, "vue-i18n", "vue/macros", "pinia", "@vueuse/head", "@vueuse/core"],
       dts: "assets/auto-imports.d.ts",
       dirs: ["assets/composable", "assets/stores", "assets/utils"],
       vueTemplate: true,