feat(vue-router): upgrade to vue-router 5

.github/workflows/actions/build-vue-router/action.yml

@@ -32,10 +32,6 @@ runs:
       run: npm run build
       shell: bash
       working-directory: ./packages/vue-router
-    - name: 🧪 Test Spec
-      run: npm run test.spec
-      shell: bash
-      working-directory: ./packages/vue-router
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-vue-router

.github/workflows/actions/test-angular-e2e/action.yml

@@ -33,7 +33,7 @@ runs:
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: 📦 Install Playwright Browsers
-      run: npx playwright install
+      run: npx playwright install chromium
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: 🔄 Sync Built Changes

.github/workflows/actions/test-vue-e2e/action.yml

@@ -32,6 +32,10 @@ runs:
       run: npm install
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
+    - name: 📦 Install Playwright Browsers
+      run: npx playwright install chromium
+      shell: bash
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: 🔄 Sync
       run: npm run sync
       shell: bash
@@ -44,3 +48,9 @@ runs:
       run: npm run test:e2e
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
+    - name: 🎭 Run Playwright Tests
+      run: npx playwright test --retries=2
+      env:
+        CI: true
+      shell: bash
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}

BREAKING.md

@@ -21,6 +21,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Select](#version-9x-select)
 - [Framework Specific](#version-9x-framework-specific)
   - [React](#version-9x-react)
+  - [Vue](#version-9x-vue)
 
 <h2 id="version-9x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -258,3 +259,53 @@ The `IonRoute` component follows the same API changes as React Router's `<Route>
 ```
 
 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).
+
+<h4 id="version-9x-vue">Vue</h4>
+
+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`.
+
+**Minimum Version Requirements**
+| Package    | Supported Version |
+| ---------- | ----------------- |
+| vue-router | 5.0.0+            |
+| vue        | 3.5.0+            |
+
+**Migration**
+
+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`:
+
+```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 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:
+
+```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 Vue Router 5, refer to the [Vue Router v4-to-v5 migration guide](https://router.vuejs.org/guide/migration/v4-to-v5.html).

core/scripts/vercel-build.sh

@@ -3,14 +3,14 @@
 # Vercel preview build script
 #
 # Builds core component tests (same as before) plus framework test apps
-# (Angular, React, React Router, Vue) so they're all accessible from a single
-# preview URL.
+# (Angular, React, React Router, Vue + Vue Router) so they're all accessible
+# from a single preview URL.
 #
 # Core tests:             /src/components/{name}/test/{scenario}
 # Angular test app:       /angular/
 # React test app:         /react/
 # React Router test app:  /react-router/
-# Vue test app:           /vue/
+# Vue + Vue Router app:   /vue/
 #
 set -e
 
@@ -253,8 +253,9 @@ build_vue_test() {
   ./build.sh "${APP}"
   cd "build/${APP}"
   npm install
+  # sync packs the PR's local @ionic/vue and @ionic/vue-router and installs them
   npm run sync
-  # Vue Router already reads import.meta.env.BASE_URL which Vite sets from --base
+  # Vue Router reads import.meta.env.BASE_URL which Vite sets from --base
   npx vite build --base /vue/
 
   mkdir -p "${OUTPUT_DIR}/vue"
@@ -376,8 +377,8 @@ cat > "${OUTPUT_DIR}/index.html" << 'LANDING_EOF'
         <p>@ionic/react-router routing, tabs, swipe-to-go-back, overlays</p>
       </a>
       <a class="card" href="/vue/">
-        <h2>Vue</h2>
-        <p>@ionic/vue overlays, router, tabs, lifecycle</p>
+        <h2>Vue + Vue Router</h2>
+        <p>@ionic/vue and @ionic/vue-router from this PR: overlays, lifecycle, routing, tabs, nested outlets, swipe-to-go-back</p>
       </a>
     </div>
   </div>

docs/react-router/testing.md

@@ -14,6 +14,34 @@ The React test app supports syncing your locally built changes for validation.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build.
 
+## Running the Test Suites
+
+`packages/react-router/scripts/test_runner.sh` orchestrates the React Router test suites end to end: it builds `@ionic/core`, `@ionic/react`, and `@ionic/react-router`, builds the test app, syncs local packages, starts the dev server, and runs Cypress and Playwright in sequence. By default it uses the `reactrouter6-react18` app; pass `--app reactrouter6-react19` to test against the latest supported React version.
+
+```shell
+# Full run (build + Cypress + Playwright)
+sh packages/react-router/scripts/test_runner.sh
+
+# Reuse the existing build/<app> directory and run only Playwright
+sh packages/react-router/scripts/test_runner.sh --skip-build --playwright-only
+
+# Filter Playwright to a single spec
+sh packages/react-router/scripts/test_runner.sh --playwright-only --spec swipe
+
+# Build/sync and serve the app for manual testing (no specs run)
+sh packages/react-router/scripts/test_runner.sh --serve
+```
+
+Useful flags:
+
+| Flag | Effect |
+|------|--------|
+| `--skip-build` | Reuse existing `packages/react-router/test/build/<app>/` instead of rebuilding |
+| `--playwright-only` | Run only the Playwright e2e suite |
+| `--spec <pattern>` | Filter Playwright specs by file path |
+| `--app <name>` | Pick a different app variant from `packages/react-router/test/apps/` (default: `reactrouter6-react18`; use `reactrouter6-react19` for the latest supported React version) |
+| `--serve` | Start the dev server only and open the browser |
+
 ## Test App Build Structure
 
 Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.

docs/vue/testing.md

@@ -14,6 +14,37 @@ The Vue test app supports syncing your locally built changes for validation.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build.
 
+## Running the Test Suites
+
+`packages/vue-router/scripts/test_runner.sh` orchestrates the Vue + Vue Router test suites end to end: it builds `@ionic/core`, `@ionic/vue`, and `@ionic/vue-router`, builds the test app, syncs local packages, runs Vitest unit tests in jsdom, then starts the Vite dev server and runs Cypress and Playwright e2e suites against it. By default it uses the `vue3` app, which targets the latest supported Vue version.
+
+```shell
+# Full run (build + Vitest + Cypress + Playwright)
+sh packages/vue-router/scripts/test_runner.sh
+
+# Reuse the existing build/<app> directory and run only Playwright
+sh packages/vue-router/scripts/test_runner.sh --skip-build --playwright-only
+
+# Filter Cypress to a single spec
+sh packages/vue-router/scripts/test_runner.sh --cypress-only --spec routing
+
+# Build/sync and serve the app for manual testing (no specs run)
+sh packages/vue-router/scripts/test_runner.sh --serve
+```
+
+Useful flags:
+
+| Flag | Effect |
+|------|--------|
+| `--skip-build` | Reuse existing `packages/vue/test/build/<app>/` instead of rebuilding |
+| `--vitest-only` | Run only the Vitest unit suite |
+| `--cypress-only` | Run only the Cypress e2e suite |
+| `--playwright-only` | Run only the Playwright e2e suite |
+| `--spec <pattern>` | Filter Cypress specs by file path |
+| `--pw-spec <pattern>` | Filter Playwright specs by file path |
+| `--app <name>` | Pick a different app variant from `packages/vue/test/apps/` (default: `vue3`, the latest supported Vue version) |
+| `--serve` | Start the dev server only and open the browser |
+
 ## Test App Build Structure
 
 > [!NOTE]