Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 43 additions & 1 deletion docs/updating/9-0.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand Down
Loading