bug: ion-tab-bar is not working when used as a standalone Vue component after the v8.3.0/v8.3.1 update

[ozgurg]

Prerequisites

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

Ionic Framework Version

v8.x

Current Behavior

If the ion-tab-bar component is extracted as a standalone Vue component, it does not change the route and is basically broken after the v8.3.0/v8.3.1 update.

Expected Behavior

Works as expected, even when used as a standalone component, like before version v8.3.0/v8.3.1.

Steps to Reproduce

Folder Information:

• ✅ 8.2.9: The ion-tab-bar is in views/TabsPage.vue and it works.

• ✅ 8.2.9-standalone: The ion-tab-bar is extracted as-is to components/TabBar.vue and it works.

• ✅ 8.3.0: The ion-tab-bar is in views/TabsPage.vue and it works.

• ❌ 8.3.0-standalone: The ion-tab-bar is extracted as-is to components/TabBar.vue and it doesn't work. That's the bug.

Steps to Reproduce

1. Run npm run dev in each folder individually.
2. Open http://localhost:5173/.
3. Switch between tabs.
4. In folders 8.2.9, 8.2.9-standalone, and 8.3.0, you'll see the tabs and the route change correctly. However, in 8.3.0-standalone, the tab visually changes, but the route does not.

Code Reproduction URL

https://github.com/ozgurg/ionic-8.3.0-ion-tab-bar-vue-component-reproduce

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
       
       Require stack:
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
       
       Require stack:
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/index.js
       - /Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 7.2.0 (/Users/ozgurg/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 8.3.0

Capacitor:

   Capacitor CLI      : 6.1.2
   @capacitor/android : not installed
   @capacitor/core    : 6.1.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v18.20.2 (/Users/ozgurg/.nvm/versions/node/v18.20.2/bin/node)
   npm    : 10.8.0
   OS     : macOS Unknown

Additional Information

The reproduce projects was created using ionic start myApp tabs. Only the versions of @ionic/vue and @ionic/vue-router were fixed to reproduce the bug. The only file modified was src/views/TabsPage.vue, and the only newly created file was src/components/TabBar.vue. Everything else remains the same as in the "tabs" starter template.

[manhtruongwang]

Update, Ionic React Tabs break after 8.3.0 if set as a seperate components as well.

[DidoMarchet]

Hi, same issue with Vue.

Regards,
Davide

[manhtruongwang]

@thetaPC sorry for the ping, Vue is working right now but React still refuse to work with 8.3.3.

[thetaPC]

@manhtruongwang Please create a new issue and include a minimal repro so we can look into it. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.