bug: vue 3 neasted child display error

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

• v4.x
• v5.x
• v6.x

Current Behavior

To use tab component it’s need to use ionic/vue-router but i cannot use router-view anymore or i get duplicated route. if i switch totally to ion-router-outlet i have css issue.

Expected Behavior

Using ionic without ionic/vue-router should be allowed for tabs with router-view Or Allowing to have other route with router-view Or Ability to disabe host css for ion-router-outlet

Steps to Reproduce

Clone this repo : https://github.com/riderx/vitesse-ionic Go to bug branch Dopnpm i Do pnpm dev Go to the new server you should see the duplicated route problem To see the error with ion-router-outlet vistit page with ldefault ayout, like hi From home page Write something in the input and click button go Then you will see footer component over hi page.

I found a workaround to make it work with v-if condition on ion-router-outlet as see in main branch : https://github.com/riderx/vitesse-ionic/blob/main/src/App.vue But is sound very wierd to do that

Code Reproduction URL

https://github.com/riderx/vitesse-ionic/tree/bug

Ionic Info

Ionic:

Ionic CLI : 6.18.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.0.0-rc.2

Utility:

cordova-res (update available: 0.15.3) : 0.15.2 native-run : 1.5.0

System:

NodeJS : v14.18.1 (/usr/local/bin/node) npm : 6.14.15 OS : macOS Monterey

Additional Information

i made issue on package who have conflic with ionic : the https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/46

[liamdebeasi]

At first glance I can see that your “hi page” does not use the IonPage component. Any pages rendered inside of ion-router-outlet need to be wrapped in <ion-page> in order to work properly.

There’s a lot going on in your app and I get the following error, so it is hard to debug:

Module not found: Error: Can't resolve './src/main.js' in '/Users/liamdebeasi/Ionic/vitesse-ionic'

Can you try adding <ion-page> to the pages you render inside of ion-router-outlet and let me know if that solves the issue?

[ionitron-bot[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.