Header and Toolbar of main component is not displaying

Hi,

I am learning ionic vue integration. I have tried to create a test app by referring this tutorial

but Header and toolbar of main custom component is not getting loaded on pages.

That tutorial is based on Ionic 5 and I am using latest version Ionic 6. May be I am missing something as per latest version. Please let me know.

src/components/MainLayout.vue

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>{{pageTitle}}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <slot></slot>
        </ion-content>
    </ion-page>
</template>
<script>
import { defineComponent } from 'vue'
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent} from '@ionic/vue';

export default defineComponent({
    
    components:{
         IonPage, IonHeader, IonToolbar, IonTitle, IonContent
    },
    setup() {
        
    },
    props: ['pageTitle'],
})
</script>

main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router';

import { IonicVue } from '@ionic/vue';

import { MainLayout } from './components/MainLayout.vue';

/* Core CSS required for Ionic components to work properly */

import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */

import '@ionic/vue/css/normalize.css';

import '@ionic/vue/css/structure.css';

import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */

import '@ionic/vue/css/padding.css';

import '@ionic/vue/css/float-elements.css';

import '@ionic/vue/css/text-alignment.css';

import '@ionic/vue/css/text-transformation.css';

import '@ionic/vue/css/flex-utils.css';

import '@ionic/vue/css/display.css';

/* Theme variables */

import './theme/variables.css';

const app = createApp(App)

.use(IonicVue)

.use(router);

app.component('main-layout',MainLayout);

router.isReady().then(() => {

app.mount('#app');

});

routes/index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';
import HomePage from '../pages/HomePage.vue'
import CalculatorPage from '../pages/CalculatorPage'

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'HomePage',
    component: HomePage
  },
  {
    path: '/calculator',
    name: 'CalculatorPage',
    component: CalculatorPage
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

app.vue

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script>
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});
</script>

pages/Homepage.vue

<template>
  <main-layout pageTitle="Home">
    <h3> This is from main layout </h3>
  </main-layout>
   
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'HomePage',
    setup() {
        
    },
})
</script>

Browser Output:

Please help.

1 post - 1 participant

Read full topic