fix(agora): migrate quasar and router (#917)

Upgrade the Agora frontend to the current Quasar app-vite toolchain and complete the Vue Router 5 migration in the same pass.

Toolchain changes:
- update @quasar/app-vite to 2.6.0
- update quasar to 2.19.3 and @quasar/extras to 1.18.0
- align the direct vite dependency with the new Quasar line on vite 8.0.5
- update @vitejs/plugin-basic-ssl to the Vite 8-compatible release
- remove the direct vite Plugin type coupling from quasar.config.ts and dedupe the browser target list for the new rolldown-based build path

Router changes:
- remove unplugin-vue-router and migrate to vue-router 5 with the built-in vue-router/vite plugin
- move generated route typing to src/route-map.d.ts and remove the old typed-router.d.ts wiring
- add the recommended tsconfig settings for router file-based routing and Volar typed-route support
- fix the app code that relied on the older route-name and route-param typing by normalizing single-value params and widening the route guard destination shape

Install/build warnings:
- remove the unplugin-vue-router deprecation by completing the router v5 migration
- add core-js to Agora's ignoredBuiltDependencies list so the clean pnpm install path stays quiet without enabling extra scripts
- leave the Sentry source-map upload report warnings unchanged

Verified with:
- cd services/agora && pnpm install --frozen-lockfile
- cd services/agora && pnpm lint
- cd services/agora && pnpm test
- cd services/agora && pnpm build:production
- cd services/agora && pnpm image:build:production

Deploy: agora

Author: nicobao

services/agora/package.json

@@ -37,7 +37,7 @@
     "@parcnet-js/ticket-spec": "^1.1.9",
     "@pcd/gpc": "^0.4.0",
     "@primeuix/themes": "^2.0.3",
-    "@quasar/extras": "^1.17.0",
+    "@quasar/extras": "^1.18.0",
     "@sentry/vue": "^10.40.0",
     "@tanstack/vue-query": "^5.92.9",
     "@tiptap/core": "3.20.0",
@@ -69,25 +69,25 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.5.3",
     "qrcode": "^1",
-    "quasar": "^2.18.6",
+    "quasar": "^2.19.3",
     "sanitize-html": "^2.17.1",
     "tweetnacl": "^1.0.3",
     "uint8arrays": "^5.1.0",
-    "vue": "^3.5.29",
+    "vue": "^3.5.32",
     "vue-i18n": "^11.1.12",
-    "vue-router": "^4.6.4",
+    "vue-router": "^5.0.4",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@eslint/json": "^1.0.1",
     "@iconify/vue": "^5.0.0",
-    "@quasar/app-vite": "2.4.1",
+    "@quasar/app-vite": "2.6.0",
     "@sentry/vite-plugin": "^5.1.1",
     "@types/node": "^25.3.3",
     "@types/qrcode": "^1.5.6",
     "@types/sanitize-html": "^2.13.0",
-    "@vitejs/plugin-basic-ssl": "^2.1.4",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.7.0",
     "autoprefixer": "^10.4.27",
@@ -103,8 +103,7 @@
     "serve": "^14.2.5",
     "terser": "^5.46.0",
     "typescript": "5.9.3",
-    "unplugin-vue-router": "^0.19.2",
-    "vite": "^7.3.1",
+    "vite": "^8.0.5",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-compression": "^0.5.1",
     "vitest": "^4.1.0",

services/agora/pnpm-lock.yaml

@@ -4,5 +4,6 @@ packages:
 ignoredBuiltDependencies:
   - '@parcel/watcher'
   - '@sentry/cli'
+  - core-js
   - esbuild
   - vue-demi

services/agora/pnpm-workspace-docker.yaml

@@ -1,5 +1,6 @@
 ignoredBuiltDependencies:
   - '@parcel/watcher'
   - '@sentry/cli'
+  - core-js
   - esbuild
   - vue-demi

services/agora/pnpm-workspace.yaml

@@ -7,7 +7,6 @@ import { fileURLToPath } from "node:url";
 
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { visualizer } from "rollup-plugin-visualizer";
-import type { Plugin } from "vite";
 import viteCompression from "vite-plugin-compression";
 
 import { defineConfig } from "#q-app/wrappers";
@@ -73,7 +72,7 @@ export default defineConfig((ctx) => {
       sourcemap: "hidden", // generates .map files for Sentry but strips sourceMappingURL from bundles so browsers don't download them
       minify: "terser",
       target: {
-        browser: ["es2020", "firefox115", "chrome115", "safari14", "chrome86"],
+        browser: ["es2020", "firefox115", "chrome86", "safari14"],
         node: "node20",
       },
 
@@ -171,7 +170,7 @@ export default defineConfig((ctx) => {
             // Note: config.env only contains VITE_* vars, so we use process.env
             validateEnv(process.env);
           },
-        } satisfies Plugin,
+        },
         viteCompression({
           algorithm: "gzip",
           ext: ".gz",
@@ -191,10 +190,10 @@ export default defineConfig((ctx) => {
         // TODO: add env variable to add TLS/SSL
         // basicSsl(),
         [
-          "unplugin-vue-router/vite",
+          "vue-router/vite",
           {
             // routesFolder: 'src/pages',
-            dts: "./typed-router.d.ts",
+            dts: "./src/route-map.d.ts",
           },
         ],
       ],

services/agora/quasar.config.ts

@@ -0,0 +1,10 @@
+import type { RouteRecordRaw, Router } from "vue-router";
+
+declare module "vue-router/auto-routes" {
+  export const routes: RouteRecordRaw[];
+
+  export function handleHotUpdate(
+    router: Router,
+    hotUpdateCallback?: (newRoutes: RouteRecordRaw[]) => void,
+  ): void;
+}

services/agora/src/auto-routes.d.ts

@@ -30,14 +30,14 @@
             <ZKHoverEffect enable-hover border-radius="15px">
               <div
                 class="settingItemStyle"
-                :class="{
-                  activeRoute: menuItem.matchRouteList.includes(route.name),
-                }"
+                  :class="{
+                    activeRoute: matchesCurrentRoute(menuItem.matchRouteList),
+                  }"
               >
                 <div class="iconItem">
                   <ZKStyledIcon
                     :svg-string="
-                      menuItem.matchRouteList.includes(route.name)
+                      matchesCurrentRoute(menuItem.matchRouteList)
                         ? menuItem.svgStringFilled
                         : menuItem.svgStringStandard
                     "
@@ -115,6 +115,13 @@ interface NavigationMenuItem {
 const navigationMenuItems = ref<NavigationMenuItem[]>([]);
 initializeMenu();
 
+function matchesCurrentRoute(routeList: readonly (keyof RouteNamedMap)[]): boolean {
+  return (
+    typeof route.name === "string" &&
+    routeList.some((routeName) => routeName === route.name)
+  );
+}
+
 watch(drawerBehavior, () => {
   initializeMenu();
 });

services/agora/src/components/navigation/SideDrawer.vue

@@ -11,9 +11,11 @@
 <script setup lang="ts">
 import ExitRoutePrompt from "src/components/routeGuard/ExitRoutePrompt.vue";
 import { useComponentI18n } from "src/composables/ui/useComponentI18n";
-import { useRouteGuard } from "src/utils/component/routing/routeGuard";
+import {
+  type RouteGuardDestination,
+  useRouteGuard,
+} from "src/utils/component/routing/routeGuard";
 import { onMounted } from "vue";
-import { type RouteLocationNormalized } from "vue-router";
 
 import {
   type NewConversationRouteGuardTranslations,
@@ -50,7 +52,7 @@ onMounted(() => {
   lockRoute();
 });
 
-function onBeforeRouteLeaveCallback(to: RouteLocationNormalized): boolean {
+function onBeforeRouteLeaveCallback(to: RouteGuardDestination): boolean {
   if (props.allowedRoutes.some((route) => to.name === route)) {
     return true;
   }

services/agora/src/components/newConversation/NewConversationRouteGuard.vue

@@ -97,7 +97,10 @@ import { useNewOpinionDraftsStore } from "src/stores/newOpinionDrafts";
 import { useUserStore } from "src/stores/user";
 import { useBackendCommentApi } from "src/utils/api/comment/comment";
 import { useInvalidateConversationQuery } from "src/utils/api/post/useConversationQuery";
-import { useRouteGuard } from "src/utils/component/routing/routeGuard";
+import {
+  type RouteGuardDestination,
+  useRouteGuard,
+} from "src/utils/component/routing/routeGuard";
 import { useNotify } from "src/utils/ui/notify";
 import {
   computed,
@@ -108,7 +111,6 @@ import {
   useTemplateRef,
   watch,
 } from "vue";
-import type { RouteLocationNormalized } from "vue-router";
 
 import {
   type CommentComposerTranslations,
@@ -348,7 +350,7 @@ async function onLoginCallback() {
   }
 }
 
-function onBeforeRouteLeaveCallback(to: RouteLocationNormalized): boolean {
+function onBeforeRouteLeaveCallback(to: RouteGuardDestination): boolean {
   if (characterCount.value > 0 && isRouteLockedCheck()) {
     // Auto-save draft when navigating to login/verify pages
     // (triggered by voting on gated conversations via PollWrapper/CommentActionBar)

services/agora/src/components/post/comments/CommentComposer.vue

@@ -1,5 +1,6 @@
 import type { EventSlug } from "src/shared/types/zod";
 import { useLoginIntentionStore } from "src/stores/loginIntention";
+import { getSingleRouteParam } from "src/utils/router/params";
 import { useEmbedMode } from "src/utils/ui/embedMode";
 import { useRoute } from "vue-router";
 
@@ -23,7 +24,10 @@ export function useConversationLoginIntentions() {
       route.name === "/conversation/[postSlugId].embed/analysis"
     ) {
       const isEmbedView = isEmbeddedMode();
-      const postSlugId = route.params.postSlugId;
+      const postSlugId = getSingleRouteParam(route.params.postSlugId);
+      if (!postSlugId) {
+        return;
+      }
       createVotingIntention(postSlugId, isEmbedView, eventSlug);
       setActiveUserIntention("voting");
     }
@@ -41,7 +45,10 @@ export function useConversationLoginIntentions() {
       route.name === "/conversation/[postSlugId].embed/analysis"
     ) {
       const isEmbedView = isEmbeddedMode();
-      const postSlugId = route.params.postSlugId;
+      const postSlugId = getSingleRouteParam(route.params.postSlugId);
+      if (!postSlugId) {
+        return;
+      }
       createOpinionAgreementIntention(
         postSlugId,
         opinionSlugId,
@@ -61,7 +68,10 @@ export function useConversationLoginIntentions() {
       route.name === "/conversation/[postSlugId].embed/analysis"
     ) {
       const isEmbedView = isEmbeddedMode();
-      const postSlugId = route.params.postSlugId;
+      const postSlugId = getSingleRouteParam(route.params.postSlugId);
+      if (!postSlugId) {
+        return;
+      }
       createReportUserContentIntention(
         postSlugId,
         opinionSlugId,