Routing Issue After Updating Vike from 0.4.236 to 0.4.237 #2894
Description
Description
Description:
Hi Rom:
The vike-vue-router project doesn’t use vikeVue, so I added vikeVue to it.
I cloned https://github.com/brillout/vike-vue-router.git, added vikeVue, and used "vike": "0.4.236", which worked fine.
However, after updating "vike" to "^0.4.237"(tried 0.4.237 and 0.4.247), a bug occurs when I click the link button to navigate between Home and About.
[Vue Router warn]: Error with push/replace State Error: [[email protected]][Bug] You stumbled upon a Vike bug. Go to https://github.com/vikejs/vike/issues/new?template=bug.yml and copy-paste this error. A maintainer will fix the bug (usually within 24 hours).
at createErrorWithCleanStackTrace (node_modules/.pnpm/[email protected][email protected]_@[email protected]_/node_modules/vike/dist/esm/utils/createErrorWithCleanStackTrace.js?v=212f662a:4:17)
at assert (node_modules/.pnpm/[email protected][email protected]_@[email protected]_/node_modules/vike/dist/esm/utils/assert.js?v=212f662a:56:27)
at window.history.<computed> [as pushState] (node_modules/.pnpm/[email protected][email protected]_@[email protected]_/node_modules/vike/dist/esm/client/runtime-client-routing/history.js?v=212f662a:125:13)
at changeLocation (node_modules/.vite/deps/vue-router.js?v=d3a0ee43:1129:58)
at Object.push (node_modules/.vite/deps/vue-router.js?v=d3a0ee43:1148:5)
at finalizeNavigation (node_modules/.vite/deps/vue-router.js?v=d3a0ee43:2211:24)
at node_modules/.vite/deps/vue-router.js?v=d3a0ee43:2150:26
Steps to Reproduce:
Here’s how we encountered the issue:
git clone https://github.com/brillout/vike-vue-router.git
git am 0001-vuerouter-success-with-vike-0.4.236.patch
git am 0002-vuerouter-fail-with-vike-0.4.237-plus.patch
pnpm install
pnpm devfinally, open http://localhost:3000 in browser and click the link button to navigate between Home and About.
Thank you for looking into this! Please let us know if you need any additional details or if there’s anything we can do to help debug this issue. 😊
Best regards
Jemmy
0001-vuerouter-success-with-vike-0.4.236.patch:
From c0a1f2223fa590a19cfb16b9e8a28a236761d3b0 Mon Sep 17 00:00:00 2001
From: Jemmy <[email protected]>
Date: Sat, 6 Dec 2025 09:40:30 +0800
Subject: [PATCH 1/2] vue-router working with vike-vue is successful when vike
ver=0.4.236
---
+config.ts | 14 ++++++++
global.d.ts | 22 +++++++++++++
package.json | 33 ++++++++++---------
pages/+onBeforeRenderClient.ts | 14 ++++++++
pages/+onBeforeRenderHtml.ts | 17 ++++++++++
pages/+onCreateApp.ts | 24 ++++++++++++++
...+onRenderClient.js => _+onRenderClient.js} | 0
pages/{+onRenderHtml.js => _+onRenderHtml.js} | 0
tsconfig.json | 25 ++++++++++++++
9 files changed, 134 insertions(+), 15 deletions(-)
create mode 100644 +config.ts
create mode 100644 global.d.ts
create mode 100644 pages/+onBeforeRenderClient.ts
create mode 100644 pages/+onBeforeRenderHtml.ts
create mode 100644 pages/+onCreateApp.ts
rename pages/{+onRenderClient.js => _+onRenderClient.js} (100%)
rename pages/{+onRenderHtml.js => _+onRenderHtml.js} (100%)
create mode 100644 tsconfig.json
diff --git a/+config.ts b/+config.ts
new file mode 100644
index 0000000..7b7c8de
--- /dev/null
+++ b/+config.ts
@@ -0,0 +1,14 @@
+import type { Config } from "vike/types";
+import vikeVue from "vike-vue/config";
+
+// Default config (can be overridden by pages)
+// https://vike.dev/config
+
+export default {
+ // https://vike.dev/head-tags
+ title: "My Vike App",
+ description: "Demo showcasing Vike",
+
+ extends: [vikeVue],
+
+} as Config;
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..064d30c
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,22 @@
+import type { Router } from 'vue-router'
+
+declare global {
+ namespace Vike {
+ interface PageContext {
+ myrouter?: Router
+ }
+ interface GlobalContextClient {
+ myrouter?: Router
+ }
+ interface GlobalContextServer {
+ myrouter ?: Router
+ }
+ }
+
+ const __VUEPRESS_SSR__: boolean;
+}
+
+// If you define Vike.PageContext in a .d.ts file then
+// make sure there is at least one export/import statement.
+// Tell TypeScript this file isn't an ambient module:
+export {}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7caab17..82a7f63 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,20 @@
{
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite build && vite preview"
- },
- "dependencies": {
- "@vitejs/plugin-vue": "^4.0.0",
- "@vue/compiler-sfc": "^3.2.33",
- "@vue/server-renderer": "^3.2.33",
- "vite": "^4.0.3",
- "vike": "0.4.143",
- "vue": "^3.2.33",
- "vue-router": "^4.0.14"
- },
- "type": "module"
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite build && vite preview"
+ },
+ "dependencies": {
+ "vike": "0.4.236",
+ "vike-vue": "^0.9.6",
+ "vue": "^3.2.33",
+ "vue-router": "^4.0.14"
+ },
+ "devDependencies": {
+ "vite": "^7.2.2",
+ "@vitejs/plugin-vue": "^6.0.1",
+ "@types/node": "^20.19.24",
+ "typescript": "^5.9.3"
+ },
+ "type": "module"
}
diff --git a/pages/+onBeforeRenderClient.ts b/pages/+onBeforeRenderClient.ts
new file mode 100644
index 0000000..efa1bf1
--- /dev/null
+++ b/pages/+onBeforeRenderClient.ts
@@ -0,0 +1,14 @@
+// +onBeforeRenderClient.ts
+// Environment: client
+
+import type { PageContextClient } from 'vike/types'
+import { useRouter } from 'vue-router';
+
+export async function onBeforeRenderClient(pageContext: PageContextClient) {
+
+ const router = pageContext.globalContext.myrouter!;
+ // const router = pageContext.myrouter!;
+
+ await router?.isReady()
+
+}
diff --git a/pages/+onBeforeRenderHtml.ts b/pages/+onBeforeRenderHtml.ts
new file mode 100644
index 0000000..dc18000
--- /dev/null
+++ b/pages/+onBeforeRenderHtml.ts
@@ -0,0 +1,17 @@
+// pages/+onBeforeRenderHtml.ts
+// Environment: server
+
+import type { PageContextServer } from 'vike/types'
+import { useRouter } from 'vue-router';
+
+export async function onBeforeRenderHtml(pageContext: PageContextServer) {
+
+ const router = pageContext.globalContext.myrouter!;
+ // const router = pageContext.myrouter!;
+
+ // set the router to the desired URL before rendering
+ router.push(pageContext.urlPathname)
+
+ await router?.isReady()
+
+}
\ No newline at end of file
diff --git a/pages/+onCreateApp.ts b/pages/+onCreateApp.ts
new file mode 100644
index 0000000..2227ea5
--- /dev/null
+++ b/pages/+onCreateApp.ts
@@ -0,0 +1,24 @@
+export { onCreateApp }
+
+import type { PageContext } from 'vike/types'
+
+import { createRouter } from './router';
+
+function onCreateApp(pageContext: PageContext) {
+
+ if (pageContext.isRenderingHead) {
+ // Don't add the plugin when rendering <head> (see Lifecycle)
+ return
+ }
+
+ const app = pageContext.app!
+
+ // server & client side
+ const router = createRouter()
+
+ pageContext.globalContext.myrouter = router
+ // pageContext.myrouter = router
+
+ app.use(router);
+
+};
diff --git a/pages/+onRenderClient.js b/pages/_+onRenderClient.js
similarity index 100%
rename from pages/+onRenderClient.js
rename to pages/_+onRenderClient.js
diff --git a/pages/+onRenderHtml.js b/pages/_+onRenderHtml.js
similarity index 100%
rename from pages/+onRenderHtml.js
rename to pages/_+onRenderHtml.js
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0192473
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "moduleResolution": "Bundler",
+ "lib": [
+ "DOM",
+ "DOM.Iterable",
+ "ESNext"
+ ],
+ "types": [
+ ".",
+ ],
+ "noEmit": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "paths": {
+ "#root/*": ["./*"],
+ }
+ },
+ "exclude": [
+ "dist"
+ ]
+}
\ No newline at end of file
--
2.51.0
0002-vuerouter-fail-with-vike-0.4.237-plus.patch:
From 80ff945db8daee95e4efb7867b75ab23987ad9c7 Mon Sep 17 00:00:00 2001
From: Jemmy <[email protected]>
Date: Sat, 6 Dec 2025 09:44:40 +0800
Subject: [PATCH 2/2] vue-router working with vike-vue has Error when vike
ver=^0.4.237
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 82a7f63..0318a8f 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"preview": "vite build && vite preview"
},
"dependencies": {
- "vike": "0.4.236",
+ "vike": "^0.4.237",
"vike-vue": "^0.9.6",
"vue": "^3.2.33",
"vue-router": "^4.0.14"
--
2.51.0