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