Skip to content

Commit 3f69ec4

Browse files
committed
chore(breaking): updating breaking.md
1 parent e1dd044 commit 3f69ec4

2 files changed

Lines changed: 969 additions & 515 deletions

File tree

BREAKING.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
2020
- [Router Outlet](#version-9x-router-outlet)
2121
- [Framework Specific](#version-9x-framework-specific)
2222
- [React](#version-9x-react)
23+
- [Vue](#version-9x-vue)
2324

2425
<h2 id="version-9x-browser-platform-support">Browser and Platform Support</h2>
2526

@@ -251,3 +252,53 @@ The `IonRoute` component follows the same API changes as React Router's `<Route>
251252
```
252253

253254
For more information on migrating from React Router v5 to v6, refer to the [React Router v6 Upgrade Guide](https://reactrouter.com/6.28.0/upgrading/v5).
255+
256+
<h4 id="version-9x-vue">Vue</h4>
257+
258+
The `@ionic/vue-router` package 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`.
259+
260+
**Minimum Version Requirements**
261+
| Package | Supported Version |
262+
| ---------- | ----------------- |
263+
| vue-router | 5.0.0+ |
264+
| vue | 3.5.0+ |
265+
266+
**Migration**
267+
268+
Vue Router 5 is a transition release that ships no runtime breaking changes for Vue Router 4 consumers, so no application code changes are required for routes, navigation guards, or the `IonRouterOutlet`. Bump the dep ranges in your app's `package.json`:
269+
270+
```diff
271+
"dependencies": {
272+
- "vue": "^3.4.0",
273+
- "vue-router": "^4.0.0"
274+
+ "vue": "^3.5.0",
275+
+ "vue-router": "^5.0.0"
276+
}
277+
```
278+
279+
**Deprecation Warning for `next()` in Navigation Guards**
280+
281+
Vue Router 5 prints a deprecation warning when `next()` is called inside `beforeRouteLeave`, `beforeRouteEnter`, `beforeRouteUpdate`, or `router.beforeEach`. The callback form still works, but Vue Router 6 will remove it. Migrate to the return-value pattern:
282+
283+
```diff
284+
// Composition API
285+
onBeforeRouteLeave((to, from) => {
286+
- if (!confirm('Leave?')) return next(false);
287+
- next();
288+
+ if (!confirm('Leave?')) return false;
289+
+ return true;
290+
});
291+
```
292+
293+
```diff
294+
// Options API
295+
beforeRouteLeave(to, from, next) {
296+
- if (!confirm('Leave?')) return next(false);
297+
- next();
298+
+ beforeRouteLeave(to, from) {
299+
+ if (!confirm('Leave?')) return false;
300+
+ return true;
301+
}
302+
```
303+
304+
For more information on Vue Router 5, refer to the [Vue Router v4-to-v5 migration guide](https://router.vuejs.org/guide/migration/v4-to-v5.html).

0 commit comments

Comments
 (0)