Vue components: only renders one component

I'm trying to update my project from Vue 2 to Vue 3, when i run the project only renders one component in the layout. These project only have on route(/). The odd thing when i put any component in first place it will render. I've upgrade my Laravel version from 8.x to 9.26.

Here is my code:

app.js

require('./bootstrap');

import { createApp } from 'vue';
import PokedexNav from "./components/PokedexNav.vue";
import PokedexContent from "./components/PokedexContent.vue";
import PokedexFooter from "./components/PokedexFooter.vue";

createApp({
    components: {
        'pokedex-nav': PokedexNav,
        'pokedex-content': PokedexContent,
        'pokedex-footer': PokedexFooter,
    }
}).mount('#app')

layout.blade

<body>
    <body>
        <div id="app">
            <!-- The Nav -->
            <pokedex-nav /> <!-- Only renders this component -->

            <!-- Content -->
            <div class="container mx-auto">
                @yield('content')
            </div>

            <!--- The Footer -->
            <pokedex-footer />
        </div>
    </body>
</body>

Can anyone help?

vincent15000

3 years ago

Level 63

Do you have any error ?

krsrk

3 years ago

Level 1

@vincent15000 No error in console nor the watch command,

1 like

vincent15000

3 years ago

Level 63

@krsrk Have you checked your HTML code ? No unclosed tag in the content ?

Please or to participate in this conversation.