Nested Routes and ion-router-outlet

I am currently developing with Vue 3 and Ionic 5.

And I am confused how I can use a second component or if my approach is completely wrong.

Project Setup:

I have a Split Pane in my App.vue where an is already present. Now I wanted to Route to another View where another one is present.

I guess code shows more than a thousand words:

In my router.js I’ve the following nested routes:

    path: '/reset/:id',
    name: 'reset', 
    component: () => import('../views/authentication/ResetPasswordRouterOutlet.vue'),
    children: [
        path: 'email', 
        component: () => import('../views/authentication/ResetPassword.vue')
        path: 'token', 
        component: () => import('../views/authentication/ResetPasswordToken.vue')
        path: 'password', 
        component: () => import('../views/authentication/ResetPasswordForm.vue')

And in my ResetPasswordRouterOutlet.vue is nothing except the outlet:


import { defineComponent } from 'vue';
//import { useRoute } from 'vue-router';
import {
} from '@ionic/vue'
export default defineComponent({
  components: {




The question:
Why is the router outlet not working and why is the nested route not shown when I navigate to /reset/email.
(Btw. ResetPassword.vue is a ion-page with h1 inside to test if it works)

Thanks in Advance.

did you start with the split-pane / sidemenu template that the cli generates?

Yes I started with that.

Any more suggestions on this? Should I remove the generated split pane menu and replace it?