Problem with Ionic back button component not being resolved by Vue

Issue

I cannot achieve to find out why I'm getting this warning from Vue, and the back button is not working:

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>

It's a simple app from scratch with some pages sharing a header, which I'm trying to outsource in a new component called TheHeader. Since then, the back button no longer works.

I'm trying to skip unnecessary code to get to the point quicker. This is 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 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>

Well, if I navigate from Home to another page, which is basically similar (I'm using a very basic nav menu within ion-content), or even if I reload this page, so no navigation at all, I get the above warning, and in case I navigate to another page, and then I click on the back button, the previous page is not loaded.

What am I doing wrong?

Solution

The docs for components specify that the type is only Object. And this demo shows that arrays cannot be used for components.

The solution is to change components into an Object in TheHeader.vue:

export default {
    // BEFORE:
    components: [ IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton ]

    // AFTER:   👇                                                          👇
    components: { IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton }
}

Answered By - tony19