Problem with setting more than one Vue components in Laravel

user_16028533 0
Viewed 68

Well, my problem is that I can't set up more than one Vue component in Laravel. When I set one, one of them then loads, but two at the same time do not load.

app.js:

require('./bootstrap');

import { createApp } from 'vue'
import Home from './components/Home.vue';
import Offers from './components/Offers.vue';
const app=createApp({});

app.component('home',Home);
app.component('offers',Offers);

app.mount('#app');

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
       <div id="app">
            <Home />
            <Offers />
       </div>
       <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Each vue component looks like this:

<template>
    <div>
        <p>test</p>
    </div>
</template>
vue-component laravel vue.js
2 Answers

In your app.js you declare your component with this code:

app.component('home',Home);
app.component('offers',Offers);

As you can see you delared it home and offers lowercase, so in order to use these components, in the blade file you have to use it this way:

       <div id="app">
            <home></home>
            <offers></offers>
       </div>
user_11917490

I've tested your issue on fresh new Laravel and Vue 3 using vue-loader. And found that the issue is related self-closing elements, please see if its working by changing this:

   <div id="app">
        <Home />
        <Offers />
   </div>

to this:

   <div id="app">
        <Home></Home>
        <Offers></Offers>
   </div>

For somereason idk why, self-closing tag behaves as a nested. It thinks that Offers is inside of Home

user_56634110
Related