vuejs 3 why content is empty?

Question

please, I'm learning a VueJS 3 and I have probably begineer problem. What's wrong?

image https://i.stack.imgur.com/sYD2K.png

my package.json

"dependencies": {
    "@ionic/vue": "^6.0.9",
    "@ionic/vue-router": "^6.0.0",
    "@popperjs/core": "^2.11.2",
    "axios": "^0.25.0",
    "core-js": "^3.6.5",
    "eslint-loader": "^4.0.2",
    "vue": "^3.2.21",
    "vue-axios": "^3.4.0",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
"devDependencies": {
    "@babel/eslint-parser": "^7.17.0",
    "@babel/eslint-plugin": "^7.16.5",
    "@capacitor/cli": "3.4.1",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "eslint": "^7.0.0",
    "eslint-plugin-vue": "^7.0.0"
  },

App.vue (getLayout return BaseLayout)

<template>
    <ion-app>
        <component :is="getLayout">
            <ion-router-outlet />
        </component>
    </ion-app>
</template>

BaseLayout.vue

<template>
    <app-main-menu />
    <page-layout />
</template>

AppMainMenu.vue

<template>
    <ion-menu side="start" content-id="main-content">
        <ion-header>
            <ion-toolbar translucent>
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item lines="none">
                    <ion-label>Main</ion-label>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-menu>
</template>

PageLayout.vue

<template>
    <ion-page id="main-content">
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-menu-button color="primary"/>
                </ion-buttons>
                <ion-title>Header</ion-title>
            </ion-toolbar>
        </ion-header>

        <ion-content>
            <slot></slot>
        </ion-content>

    </ion-page>
</template>

StockIndexAction.vue

<template>
    <base-layout>
        <ion-content>
            Hello, World!
        </ion-content>
    </base-layout>
</template>

Why content is empty? I suspect that the reason concerns the menu layer

Update: I have redesigned the architecture of the application. I had to abandon the dynamic component. <component :is="getLayout"> <ion-router-outlet /> </component>

Thank you all!

Answer 1

try:

<template>
 <div>
  <app-main-menu />
  <page-layout>
   <slot></slot>  
  <page-layout/>
 </div>
</template>

On BaseLayout.vue