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

2025-12-21 13:04:59 +01:00 · 2024-06-17 12:07:24 -07:00
parent d344c5f20e
commit f24d4951ad
22 changed files with 199 additions and 571 deletions
--- a/assets/auto-imports.d.ts
+++ b/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 onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
+  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 useRouter: typeof import('vue-router')['useRouter']
+  const useRoute: typeof import('vue-router/auto')['useRoute']
+  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 onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
+    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 useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    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 onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router/auto')['onBeforeRouteLeave']>
+    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 useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    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']>
--- a/assets/components/ContainerTable.vue
+++ b/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>
--- a/assets/components/FuzzySearchModal.spec.ts
+++ b/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" } });
  });
 });
--- a/assets/components/FuzzySearchModal.vue
+++ b/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();
 }
--- a/assets/components/HostMenu.vue
+++ b/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"
--- a/assets/components/Links.vue
+++ b/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"
--- a/assets/components/LogViewer/ContainerEventLogItem.vue
+++ b/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>

--- a/assets/components/SidePanel.vue
+++ b/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>
--- a/assets/components/SwarmMenu.vue
+++ b/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 }}
--- a/assets/components/common/MobileMenu.vue
+++ b/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"
--- a/assets/modules/router.ts
+++ b/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) => {
--- a/assets/pages/container/[id].vue
+++ b/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();
--- a/assets/pages/group/[name].vue
+++ b/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) {
--- a/assets/pages/merged/[name].vue
+++ b/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);
--- a/assets/pages/service/[name].vue
+++ b/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) {
--- a/assets/pages/show.vue
+++ b/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: "/" });
    }
  }
 });
--- a/assets/pages/stack/[name].vue
+++ b/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) {
--- a/assets/typed-router.d.ts
+++ b/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> }>,
+  }
+}
--- a/package.json
+++ b/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"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tsconfig.json
+++ b/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"]
 }
--- a/vite.config.ts
+++ b/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,