From 3f11b6b9032445eabf3c87b1490bbf438af3f7f0 Mon Sep 17 00:00:00 2001 From: ShaneK Date: Thu, 7 May 2026 14:48:18 -0700 Subject: [PATCH 1/2] docs(updating): add vue router 5 migration guidance for ionic 9 --- docs/updating/9-0.md | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/docs/updating/9-0.md b/docs/updating/9-0.md index b45b2b828c..6430bb7c28 100644 --- a/docs/updating/9-0.md +++ b/docs/updating/9-0.md @@ -238,7 +238,7 @@ For more information on migrating from React Router v5 to v6, refer to the [Reac ### Vue -1. Ionic 9 supports Vue 3.0.6+. Update to the latest version of Vue: +1. Ionic 9 supports Vue 3.5+ and Vue Router 5. Update Vue and Vue Router: ```shell npm install vue@latest vue-router@latest @@ -250,6 +250,48 @@ npm install vue@latest vue-router@latest npm install @ionic/vue@latest @ionic/vue-router@latest ``` +#### Vue Router 5 Migration + +`@ionic/vue-router` now requires Vue Router v5. Vue Router v4 is no longer supported. Vue Router v5 also raises its peer requirement on Vue itself, so the minimum supported Vue version moves to `3.5.0`. + +Vue Router v5 is a transition release that ships no runtime breaking changes for Vue Router v4 consumers, so no application code changes are required for routes, navigation guards, or `IonRouterOutlet`. Bump the dep ranges in your app's `package.json`: + +```diff + "dependencies": { +- "vue": "^3.4.0", +- "vue-router": "^4.0.0" ++ "vue": "^3.5.0", ++ "vue-router": "^5.0.0" + } +``` + +#### Deprecation Warning for `next()` in Navigation Guards + +Vue Router v5 prints a deprecation warning when `next()` is called inside `beforeRouteLeave`, `beforeRouteEnter`, `beforeRouteUpdate`, or `router.beforeEach`. The callback form still works, but Vue Router v6 will remove it. Migrate to the return-value pattern: + +```diff + // Composition API + onBeforeRouteLeave((to, from) => { +- if (!confirm('Leave?')) return next(false); +- next(); ++ if (!confirm('Leave?')) return false; ++ return true; + }); +``` + +```diff + // Options API +- beforeRouteLeave(to, from, next) { +- if (!confirm('Leave?')) return next(false); +- next(); ++ beforeRouteLeave(to, from) { ++ if (!confirm('Leave?')) return false; ++ return true; + } +``` + +For more information on migrating from Vue Router v4 to v5, refer to the [Vue Router v4-to-v5 migration guide](https://router.vuejs.org/guide/migration/v4-to-v5.html). + ### Core 1. Update to the latest version of Ionic 9: From 8bfc5a2b2aed34f1d2a12f5b421512e075402b6f Mon Sep 17 00:00:00 2001 From: ShaneK Date: Fri, 8 May 2026 05:51:22 -0700 Subject: [PATCH 2/2] docs(support): add v9 vue support and vue router version table --- docs/reference/support.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/reference/support.md b/docs/reference/support.md index 9b6f7ae478..7a613aa0ac 100644 --- a/docs/reference/support.md +++ b/docs/reference/support.md @@ -76,11 +76,22 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab | Framework | Required Vue Version | TypeScript | | :-------: | :------------------: | :--------: | +| v9 | v3.5+ | 3.9+ | | v8 | v3.0.6+ | 3.9+ | | v7 | v3.0.6+ | 3.9+ | | v6 | v3.0.6+ | 3.9+ | | v5 | v3.0+ | 3.9+ | +#### Ionic Vue Router + +| Framework | Required Vue Router Version | +| :-------: | :-------------------------: | +| v9 | v5+ | +| v8 | v4+ | +| v7 | v4+ | +| v6 | v4+ | +| v5 | v4+ | + ### Native Bridges | Framework | Cordova | Capacitor |