Laravel: vue components not rendering

Question

My vue components are not rendering on the page, despite following tutorials. I have the following layout (master.blade.php):

    &         


        

Answer 1

// UPDATE

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

add .default in component in your app.js. Change your link and script uri

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"> </script>

Answer 2

Maybe your component is not rendering due to wrong path issue for app.css and app.js.

Try to render by using asset like :

<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

<script src="{{asset('js/app.js')}}"></script>

Answer 3

try to add div element below of template and inside of the div enter your code and then in your terminal enter npm run watch or npm run dev wait until the compiled message comes up in your terminal if their is error it will prompt you