Skip to content

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

Merged
ShaneK merged 18 commits into
major-9.0from
feat/vue-router-upgrade
May 8, 2026
Merged

feat(vue-router): upgrade to vue-router 5#31117
ShaneK merged 18 commits into
major-9.0from
feat/vue-router-upgrade

Conversation

@ShaneK

Copy link
Copy Markdown
Member

Issue number: internal


What is the current behavior?

@ionic/vue-router and @ionic/vue build against vue-router 4

What is the new behavior?

Bumps vue-router to ^5.0.6 and vue to ^3.5.0 (vue-router 5 raises its peer to ^3.5.0). We also added Playwright tests for Vue router that are in full parity with the previous Jest and removed the Jest tests and replaced them with Playwright.

This PR also makes the current Vue test app, which is also used for the Vue Router automated tests, get rebuilt with the current PR version for testing in the Vercel preview links.

Does this introduce a breaking change?

  • Yes
  • No

Consumer apps that pin vue-router themselves need to upgrade to ^5.0.0, and apps that explicitly pin vue need to bump to ^3.5.0

Other information

CI changes: CI no longer runs npm run test.spec (the script and Jest devDeps are gone), and now runs playwright tests

Preview (Vue + Vue Router test app, demos both packages from this PR):
https://ionic-framework-git-feat-vue-router-upgrade-ionic1.vercel.app/vue/

@ShaneK
ShaneK requested a review from a team as a code ownerMay 6, 2026 17:47
@ShaneK
ShaneK requested a review from gnbmMay 6, 2026 17:47
@vercel

vercelBot commented May 6, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
ionic-frameworkReadyReadyPreview, CommentMay 8, 2026 8:49pm

Request Review

@github-actionsgithub-actionsBot added package: core @ionic/core package package: vue @ionic/vue package package: react @ionic/react package labels May 6, 2026
@ShaneKShaneK changed the title Feat/vue router upgradefeat(vue-router): upgrade to vue-router 5May 6, 2026
@reslear

Copy link
Copy Markdown

Nice, Will it work with vue-router/auto-routes ?

Comment thread.github/workflows/actions/test-vue-e2e/action.yml
Comment threadpackages/vue-router/scripts/test_runner.sh Outdated
Comment threadpackages/vue-router/package.json
Comment threadpackages/vue/test/apps/vue3/package.json
@ShaneK

ShaneK commented May 7, 2026

Copy link
Copy Markdown
MemberAuthor

Nice, Will it work with vue-router/auto-routes ?

@reslear Hey, thanks! We don't test unplugin-vue-router / vue-router/auto-routes directly, but @ionic/vue-router consumes the standard vue-router 5 Router instance, so file-based route generation should behave the same as it does with plain vue-router 5, I'd expect.

@thetaPCthetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thank you!

All my comments are suggestions and not blockers. I found no issues during the manual testing.

Comment threadpackages/vue/test/base/playwright.config.ts
Comment threadpackages/vue/test/base/tests/e2e/playwright/utils/animation-utils.ts Outdated
Comment threadpackages/vue/test/base/tests/e2e/playwright/utils/animation-utils.ts Outdated
Comment threadpackages/vue/test/base/tests/e2e/playwright/location-history.spec.ts Outdated
Comment threadpackages/vue/test/base/tests/e2e/playwright/location-history.spec.ts Outdated
name: 'Mobile Chrome',
use: {
browserName: 'chromium',
...devices['Pixel 5'],

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this one testing a phone while Angular tests a desktop?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Swipe-to-go-back is iOS-only and only fires on a touch viewport, so the gesture tests need a phone device profile. The Angular suite doesn't exercise gestures, so a desktop chrome viewport is fine there.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It also doesn't make a lot of sense to me that we'd test on non-mobile views primarily considering most of our use case is mobile views

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're correct, even core has it as mobiles. Then the real question is why Angular uses Desktop? 🤔 @brandyscarney you added it, what was the reason? We should change it at a different time if we can.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't remember 🤷‍♀️ It was probably just because it migrated from Cypress which tested on desktop.

Comment thread.github/workflows/actions/test-vue-e2e/action.yml
Comment threadpackages/vue-router/scripts/test_runner.sh
Comment threadpackages/vue/test/apps/vue3/package.json
Comment threadpackages/vue/test/apps/vue3/package.json
@thetaPC
thetaPC removed the request for review from gnbmMay 7, 2026 18:12
@thetaPC
thetaPC requested a review from brandyscarneyMay 7, 2026 18:12

@brandyscarneybrandyscarney left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found some issues while testing that I left as a comment on Jira. Great updates otherwise!

Comment threadBREAKING.md

@thetaPCthetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with minor suggestions

Comment threaddocs/react-router/testing.md Outdated

## 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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that it will run the latest version.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment threaddocs/vue/testing.md Outdated

## 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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that it will run the latest version.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

| `--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`) |
| `--serve` | Start the dev server only and open the browser |

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that it will run the latest version.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment threaddocs/vue/testing.md Outdated

## 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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that it will run the latest version.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment threaddocs/vue/testing.md
| `--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`) |
| `--serve` | Start the dev server only and open the browser |

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that it will run the latest version.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You mentioned that this fix is for a long-standing bug. Is there an issue associated to it? Maybe we should add the fix in main so the community can get it sooner.

@ShaneKShaneKMay 8, 2026

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's a card in the vue epic that might be related, if not I'll go looking to see if it's reported. I'll probably just fix it in main the same way and deal with the conflict next update from main

@brandyscarneybrandyscarney left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thanks for fixing the issues I found. 🚀

@ShaneK
ShaneK merged commit 3bc8d8f into major-9.0May 8, 2026
50 checks passed
@ShaneK
ShaneK deleted the feat/vue-router-upgrade branch May 8, 2026 20:55
@ShaneKShaneK mentioned this pull request May 24, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core@ionic/core packagepackage: vue@ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@ShaneK@reslear@brandyscarney@thetaPC