Vue3

client/__mocks__/vue-router.js

@@ -0,0 +1,76 @@
+module.exports = {
+    createRouter: jest.fn(() => ({
+        push: jest.fn(),
+        replace: jest.fn(),
+        go: jest.fn(),
+        back: jest.fn(),
+        forward: jest.fn(),
+        beforeEach: jest.fn(),
+        afterEach: jest.fn(),
+        install: jest.fn(),
+        resolve: jest.fn((route) => ({ href: `resolved-${route}` })),
+    })),
+    createWebHistory: jest.fn(() => ({
+        base: "/",
+        push: jest.fn(),
+        replace: jest.fn(),
+        go: jest.fn(),
+        back: jest.fn(),
+        forward: jest.fn(),
+    })),
+    createWebHashHistory: jest.fn(() => ({
+        base: "/",
+        push: jest.fn(),
+        replace: jest.fn(),
+        go: jest.fn(),
+        back: jest.fn(),
+        forward: jest.fn(),
+    })),
+    createMemoryHistory: jest.fn(() => ({
+        base: "/",
+        push: jest.fn(),
+        replace: jest.fn(),
+        go: jest.fn(),
+        back: jest.fn(),
+        forward: jest.fn(),
+    })),
+    useRoute: jest.fn(() => ({
+        path: "/",
+        params: {},
+        query: {},
+        hash: "",
+        fullPath: "/",
+        matched: [],
+        meta: {},
+        name: undefined,
+    })),
+    useRouter: jest.fn(() => ({
+        push: jest.fn(),
+        replace: jest.fn(),
+        go: jest.fn(),
+        back: jest.fn(),
+        forward: jest.fn(),
+        resolve: jest.fn((route) => ({ href: `resolved-${route}` })),
+        currentRoute: {
+            value: {
+                path: "/",
+                params: {},
+                query: {},
+                hash: "",
+                fullPath: "/",
+                matched: [],
+                meta: {},
+                name: undefined,
+            },
+        },
+    })),
+    RouterLink: {
+        name: "RouterLink",
+        props: ["to"],
+        template: "<a><slot /></a>",
+    },
+    RouterView: {
+        name: "RouterView",
+        template: "<div />",
+    },
+};

client/build-config.shared.js

@@ -18,8 +18,8 @@ export const legacyAliases = {
     jqueryVendor: path.join(libsBase, "jquery/jquery.js"),
     storemodern: path.join(__dirname, "node_modules/store/dist/store.modern.js"),
 
-    // Vue
-    vue: path.join(__dirname, "node_modules/vue/dist/vue.esm.js"),
+    // Vue - use @vue/compat for Vue 3 compatibility mode
+    vue: path.join(__dirname, "node_modules/@vue/compat"),
 
     // Build config
     config: path.join(scriptsBase, "config", process.env.NODE_ENV || "development") + ".js",