Skip to content

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

Open
ShaneK wants to merge 16 commits intomajor-9.0from
feat/vue-router-upgrade
Open

feat(vue-router): upgrade to vue-router 5#31117
ShaneK wants to merge 16 commits intomajor-9.0from
feat/vue-router-upgrade

Conversation

@ShaneK
Copy link
Copy Markdown
Member

@ShaneK ShaneK commented May 6, 2026

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 owner May 6, 2026 17:47
@ShaneK ShaneK requested a review from gnbm May 6, 2026 17:47
@vercel
Copy link
Copy Markdown

vercel Bot commented May 6, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 8, 2026 1:46pm

Request Review

@github-actions github-actions Bot added package: core @ionic/core package package: vue @ionic/vue package package: react @ionic/react package labels May 6, 2026
@ShaneK ShaneK changed the title Feat/vue router upgrade feat(vue-router): upgrade to vue-router 5 May 6, 2026
@ShaneK ShaneK force-pushed the feat/vue-router-upgrade branch from 561f950 to 3f69ec4 Compare May 6, 2026 18:09
@github-actions github-actions Bot removed the package: react @ionic/react package label May 6, 2026
@reslear
Copy link
Copy Markdown

reslear commented May 6, 2026

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

Comment thread .github/workflows/actions/test-vue-e2e/action.yml
Comment thread packages/vue-router/scripts/test_runner.sh Outdated
Comment thread packages/vue-router/package.json
Comment thread packages/vue/test/apps/vue3/package.json
@ShaneK
Copy link
Copy Markdown
Member Author

ShaneK commented May 7, 2026

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.

Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

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 thread packages/vue/test/base/playwright.config.ts
Comment thread packages/vue/test/base/tests/e2e/playwright/utils/animation-utils.ts Outdated
Comment thread packages/vue/test/base/tests/e2e/playwright/utils/animation-utils.ts Outdated
Comment thread packages/vue/test/base/tests/e2e/playwright/location-history.spec.ts Outdated
Comment thread packages/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
Member Author

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
Member Author

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 thread packages/vue-router/scripts/test_runner.sh
Comment thread packages/vue/test/apps/vue3/package.json
Comment thread packages/vue/test/apps/vue3/package.json
@thetaPC thetaPC removed the request for review from gnbm May 7, 2026 18:12
@thetaPC thetaPC requested a review from brandyscarney May 7, 2026 18:12
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

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 thread BREAKING.md
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM with minor suggestions


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

Comment thread docs/vue/testing.md

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

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

Comment thread docs/vue/testing.md

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

Comment thread docs/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
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.

Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants