feat: using ion-tab-bar without ion-tabs or ion-router-outlet

[z0lo13]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

[Vue warn]: injection "tabBarData" not found.
Vue warn]: Unhandled error during execution of native event handler 
  at <IonTabButton tab="3" > 
  at <IonTabBar color="light" > 
  at <Example> 
  at <IonContent class="ion-padding" > 
  at <IonApp> 
  at <App>

Expected Behavior

to work without the need of ion-tabs or router outlet. The navigation will be done by method.

Steps to Reproduce

https://stackblitz.com/edit/hknvlmdm

Code Reproduction URL

https://stackblitz.com/edit/hknvlmdm

Ionic Info

ionic info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.5.3

Capacitor:

Capacitor CLI : 7.2.0 @capacitor/android : 7.2.0 @capacitor/core : 7.2.0 @capacitor/ios : 7.2.0

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v22.12.0 (/Users/z0lo/.nvm/versions/node/v22.12.0/bin/node) npm : 10.9.0 OS : macOS

Additional Information

No response

[jacobg]

Try the ion-segment-view content. It's less opinionated about how you use it.

[z0lo13]

@jacobg not sure how that could help, we only need the tab bar buttons. And routing is handled via router in method.

[brandyscarney]

Thank you for the issue! I have marked this as a feature request as ion-tab-bar has always required an ion-tabs component.

[z0lo13]

@brandyscarney it would also be great if the animation is present when navigating between tabs.