Issue number: resolves #29885

What is the current behavior?

Vue: Tab bar could be a standalone element within ion-tabs and would navigate without issues with a router outlet before v8.3:

<ion-tabs>
  <ion-router-outlet></ion-router-outlet>

  <TabBar></TabBar>
</ion-tabs>

It would work as if it was written as:

<ion-tabs>
  <ion-router-outlet></ion-router-outlet>

  <ion-tab-bar slot="bottom">
    <!-- Buttons -->
  </ion-tab-bar>
</ion-tabs>

After v8.3, any ion-tab-bar that was not a direct child of ion-tabs would lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view.

What is the new behavior?

The Vue tab bar's _hasRouterOutlet prop has been modified to accept both Boolean and undefined values. When the value is undefined, it indicates that the ion-tab-bar component was not found within the slotted content of ion-tabs. This typically occurs when the tab bar is not passed as a direct child of ion-tabs.

In such cases, the tab bar will perform its own check to determine if an ion-router-outlet is present. This check cannot be handled by tabs, as it would need to wait until after mounting to access the DOM, which would be too late since the tab bar would have already executed the logic that depends on _hasRouterOutlet.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.3.3-dev.11728341918.1d3d4b3f

How to test:

1. Clone the issue repro
2. Navigate to folder 8.3.0-standalone
3. Install deps
4. Start app
5. Click on the tab buttons
6. Notice the content and URL doesn't change
7. Install dev build: npm install @ionic/vue@8.3.3-dev.11728341918.1d3d4b3f
8. Start app
9. Click on the tab buttons
10. Verify that the correct content and URL displays