Header and Toolbar of main component is not displaying

Ionic Framework Ionic Vue
1

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:

2022-08-29 at 8.54 PM
2022-08-29 at 8.54 PM2770×1645 127 KB

Please help.

2

Have you checked the console in Dev Tools to see if there are any warnings/errors? From what I see, you are not importing MainLayout in your Homepage.vue component.

3

Thanks for your reply. In console, it shows the below warning

Failed to resolve component: main-layout
If this is a native custom element, make sure to exclude it from component resolution

2022-08-29 at 9.36 PM
2022-08-29 at 9.36 PM1240×1625 224 KB

Do I need to import the MainLayout component on Homepage.vue component too?

I have imported the MainLayout in HomePage.vue component but it stills show that same warning.

I have also noticed the below warning on Terminal

[vue-cli-service]  warning  in ./src/pages/HomePage.vue?vue&type=script&lang=js
[vue-cli-service] export 'MainLayout' (imported as 'MainLayout') was not found in '../components/MainLayout.vue' (possible exports: default)
[vue-cli-service]  warning  in ./src/main.js
[vue-cli-service] export 'MainLayout' (imported as 'MainLayout') was not found in './components/MainLayout.vue' (possible exports: default)

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8101/ 
[vue-cli-service]   - Network: http://192.168.247.156:8101/

Any Idea what I am doing wrong here?. Thanks in advance.

4

If you aren’t using <script setup> or globally registering components, then every component being used needs to be imported and added to the components prop in the component you are using it.

5

Thanks for your reply. I have already registered that MainLayout.vue Component globally in main.js and so I thought there is no need import the MainLayout.vue in HomePage.vue component. Is it fine?

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('MainLayout',MainLayout);

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

app.mount('#app');

});

Based on the below terminal warning, I think I am missing something on MainLayout.vue component

vue-cli-service]  warning  in ./src/main.js
[vue-cli-service] export 'MainLayout' (imported as 'MainLayout') was not found in './components/MainLayout.vue' (possible exports: default)

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8101/ 
[vue-cli-service]   - Network: http://192.168.247.156:8101/
Build finished at 22:26:46 by 0.000s

Any Idea?. Thanks

6

Ah, sorry, I missed that. I believe you globally register components using PascalCasing.

app.component('MainLayout', MainLayout);
7

yes, I have registered that MainLayout.vue globally but not sure why it is not loading and the below warning is displaying on Terminal.

vue-cli-service]  warning  in ./src/main.js
[vue-cli-service] export 'MainLayout' (imported as 'MainLayout') was not found in './components/MainLayout.vue' (possible exports: default)

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8101/ 
[vue-cli-service]   - Network: http://192.168.247.156:8101/
Build finished at 22:26:46 by 0.000s
8

Can you provide a sample repo with the issue?

9

Thanks for getting back to me. Please check the below repo

https://bitbucket.org/dhakshinait/ionictest-app/src/master/

10

Thanks! Figured it out. Your import should be the following in main.js without the braces:

import MainLayout from "./components/MainLayout.vue"
1 Like
11

Thank you. It solved that issue. I really appreciate your help.