test(vue): cover tab bar used without tabs

[ShaneK]

Issue number: resolves #30361

---

What is the current behavior?

In v8, using ion-tab-bar without ion-tabs throws in Vue because IonTabBar injects tabBarData with no default and reads .value off undefined. Clicking a tab button then throws again in the native event handler. This was already fixed in v9 by the strict type checking chore in #31320, which gave the injection a null default and guarded it, but nothing tests the standalone case in a browser.

What is the new behavior?

This adds a /tabs-standalone page to the Vue test app with an ion-tab-bar that has no ion-tabs or ion-router-outlet around it, where the app tracks the active tab itself and navigates by calling router.push from the tab buttons. The new Playwright spec checks that clicking moves the selected state, runs the app's own @click, doesn't change the URL, logs no errors or warnings, and that router.push from a tab button navigates.

Does this introduce a breaking change?

• Yes
• No

Other information

I checked that the spec catches the original bug by patching the built @ionic/vue back to the v8 inject("tabBarData"). Both tests fail with the errors from the issue, and they pass on this branch. This is test-only, so the v8 behavior is unchanged. We aren't backporting the fix since it isn't critical.

The follow-up request in the issue for a page animation when switching tabs by method isn't covered here and is out of scope for the issue it's in.

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 16, 2026 9:22pm UTC