I'm having trouble figuring out why Vue is giving me a warning and the back button isn't functioning as expected:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: ion-back-button
at <TheHeader titulo="Home" >
at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> >
at <Home ref=Ref< undefined > key="/home" isInOutlet=true ... >
at <IonRouterOutlet>
at <IonApp>
at <App>
This issue arose in a simple app that I built from scratch with multiple pages sharing a header. I decided to create a new component called TheHeader for outsourcing the header, but ever since then, the back button stopped working.
I want to cut through unnecessary information to address this quickly. Here's an example of one of my pages, Home.vue:
<template>
<ion-page>
<the-header titulo="Home"></the-header>
<ion-content>
</ion-content>
</ion-page>
</template>
<script>
import { IonContent, IonPage } from '@ionic/vue';
import TheHeader from '../components/TheHeader.vue';
export default {
name: 'Home',
components: {
IonContent,
IonPage,
'the-header': TheHeader
}
};
</script>
This is the code for my TheHeader.vue component:
<template>
<ion-header>
<ion-toolbar>
<ion-buttons name="start">
<ion-back-button>
</ion-back-button>
</ion-buttons>
<ion-title>
{{ titulo }}
</ion-title>
</ion-toolbar>
</ion-header>
</template>
<script>
import { IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton } from '@ionic/vue'
export default {
props: [
'titulo'
],
components: [
IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton
]
}
</script>
Whenever I navigate from Home to another page, or simply reload the current page without any navigation, I encounter the warning mentioned above. Additionally, if I navigate to another page and try clicking the back button, it doesn't lead me back to the previous page.
Can anyone help me identify what I might be doing incorrectly?