How to use nested ion-router-outlet in ionic6 vue? - ionic-framework

Question

I have the following router setup:
{
name: "settings",
path: "/settings",
component: () => import("#/views/SettingsPage.vue"),
children: [
{
path: 'profile',
component: () => import("#/views/ProfileSettingsPage.vue"),
},
{
path: 'app',
component: () => import("#/views/AppSettingsPage.vue"),
},
],
beforeEnter: authCheck,
},
My app.vue:
<template>
<ion-app>
<ion-content ref="content" class="ion-padding" fullscreen="true">
<ion-router-outlet id="main" class="mt-16" />
</ion-content>
</ion-app>
</template>
I then want my children routes rendered in SettingsPage.vue:
<template>
<ion-page>
Settings Page
<!--Component to Navigate between Sub Settings-->
<ion-router-outlet class="inner-router"></ion-router-outlet>
</ion-page>
</template>
The sub components gets shown but ionic styles makes them position absolute. I tried to change CSS with the applied "inner-router" class but ending up with more issues when it comes to scroll the ion-content in app.vue
Here is an example on what I want as a result:
+------------------+ +-----------------+
| Settings | | Settings |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | App | |
| | ... | | | | ... | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
Switching between the sub components Profile and App shouldn't reanimate the outer settings page which is why I tried to setup like this.
Thanks for any help!
The CSS i used:
<style lang="scss">
.inner-router {
inset: inherit;
position: inherit;
contain: inherit;
overflow: inherit;
z-index: inherit;
--overflow: auto;
display: block;
position: relative;
flex: 1 1 0%;
width: 100%;
height: auto;
contain: inherit;
margin: auto !important;
padding: auto !important;
.ion-page {
inset: inherit;
position: inherit;
contain: inherit;
overflow: inherit;
z-index: inherit;
}
}
</style>
Apparently with my code only first page in that router-outlet seem to be animated correctly.