ionic-framework: 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