Why is Vue.js not showing anything in Laravel 5.6?

user_10569029 0
Viewed 1493

I have installed vue.js by following these steps in Laravel 5.6 and all other dependencies are working perfectly. Only Vue.js is not responding. 

npm intall 
npm run dev
npm run watch

I am sharing all the codes on I have added. I have created a id="app" in my html file. 

<div id="app">
            <div class="container">
              <articles></articles>                  
            </div>


<!-- I used this link in my html file for connecting with app.js file 
  -->
 <script src="{{asset('js/app.js')}}"></script>

I edited the app.js file that is as under.

require('./bootstrap');

    window.Vue = require('vue');


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

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

I also created Articles.vue file and linked that to app.js. But my html page is showing nothing. My file in components/Articles.Vue 

<template>

<h1>Hello World!</h1>

</template>

Console is showing no errors enter image description here

Vue Tab enter image description here

When I inspect DOM, I get this enter image description here

This is the Vue file. It is also not showing any tags enter image description here

laravel vue.js
2 Answers

As ceejayoz said in the comment: Rename it to e.g. articleElement and use it as <article-element></article-element>

user_31519400

this thread is a bit old, but as i had the same problem as you had (maybe we both watched the same youtube video "Full Stack Vue.js & Laravel"), i will still share my solution. With some research and a lot of trying around i landed on the official Laravel page (https://laravel-mix.com/docs/6.0/what-is-mix). The last task of this guide "npx mix" did the job for me. Everytime i change some of my js files now i use this little command to compile again and all my changes take place.

Hopefully this will help some others too :)

user_133303640
Related