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

@@ -20,6 +20,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Router Outlet](#version-9x-router-outlet)
 - [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>
 
@@ -251,3 +252,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>