[Vuejs]-VueJs component not showing in page (using Laravel framework)

by

0👍

Can you try this:

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

<body>
   <div id="app">
      <example-component></example-component>
   </div>
</body>

0👍

Is your app.js file like this

require('./bootstrap');

    window.Vue = require('vue');

    Vue.component('Example', require('./components/Example.vue'));

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

Also, try to add the app.js to the bottom of the page

<body>
   <div id="app">
      <example-component></example-component>
   </div>

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

</body>

0👍

I presume you are using Chrome? Did you disable cache? If not: Open the dev tools and disbale caching when dev tools open (quick google search gives you many links how to do it), reload – component will be there.

And make sure you have the component wrapped on the #app div.

If that doesn’t work … show us app.js, component.js and also the blade templates.

0👍

Try to change the script asset from:

<body>
   <div id="app">
      <example-component></example-component>
   </div>

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

</body>

To

<body>
   <div id="app">
      <example-component></example-component>
   </div>

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

</body>

It worked for me when I went through this problem

Leave a comment