Question 15946 in Laravel Question posted in
The official Laravel Documentation can be found here.

Vue 3 not rendering components (in Laravel 8)

I have a simple blade with a component inside:

<section>
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)">
</carousel>

The component looks like this:

<template>
    <fragment>
        <h1>My component</h1>
        {{ slides }}
    </fragment>
</template>

export default {
    props: [
      'slides'
    ],
    mounted() {
        console.log("mounted")
    }
}

And of course I have it in app.js (the path is correct):

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('carousel', require('./components/web/partials/Carousel.vue').default);

const app = new Vue({`
    el: '#app',`
});

My webpack.mix.js also contains:

mix.js('resources/js/app.js', 'public/js')     .vue()     .sass('resources/sass/app.scss', 'public/css');

But when I access the page, I can’t see the component. I see just the <h1>Carousel</h1> that is in the blade. Also there are no errors in the console, which I find weird. The "ExampleComponent" that is created after vue install was not rendering either (I removed it from app.js).

I’m using:

"laravel/ui": "^3.3" 
"vue": "^3.2.26", 
"vue-template-compiler": "^2.6.11" 
"sass": "^1.32.11", 
"sass-loader": "^11.0.1", 
"vue-loader": "^16.2.0"

I have been trying to switch between vue versions, also vue-loader versions, I have been scrolling through SO with similar problems but none of the solutions worked for me.

Tags:

2

Answers


  1. 0
    • First, in your app.js, it’s how Vue2 init but not Vue3
    // vue2 way
new Vue({`
    el: '#app',`
});

// vue3 way
Vue.createApp(...).mount('#app')

    See how Vue3 init via the hello-word of Vue3.

    • Second, there is no fragment in Vue3 built-in-components.

    Read the document for more details about built-in-components.

    In Vue3, you can write a multiple roots component without <fragment> directly

    <template>
    <h1>My component</h1>
    {{ slides }}
</template>
    Login or Signup to reply.
  2. 0

    You need to reference app.js in your blade file and add id app to html tag:

    <section id="app">
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)"></carousel>
<section>
<script src="{{ mix('css/app.js') }}"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search