Vue Components not showing/updating

Question

I am working in Laravel 5.4, and Vue components are not showing/updating. I start a new project and create a route /chat in web.php

This is chat.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>

<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>

This is app.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));

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

Example and Chat components are some basic templates, I am not passing any data, just plain text.

Chat.vue

<template lang="html">
<div id="content">
    <h1>Messages</h1>
    <p>Message text</p>
    <small>Hiii</small>
</div>
 </template>

<script>
export default {
}
</script>

When I run php artisan for the first time, everything works. I try to edit some text in Chat.vue, like change 'Hiiii' to Hello, when I reload the page it won't change, it just stays the same. I tried restarting the pc, running php artisan again, anything I could think of. I tried putting some Vue code directly in chat.blade.php, and than it works. It looks like it is not detecting changes in app.js and components. FYI, I even deleted the Example.vue component. It still appeared on the page.

I don't know what Laravel do under hood and how it compiles stuff, but I think that php artisan doesn't take care of Javascript. Have you tried to run npm run dev after the editing file ? — Belmin Bedak
You could also use npm run watch so that file should be recompiled on change and it will save on the initial overhead on all subsequent requests. — Rwd

Jordao Manguena Jordao Manguena · Accepted Answer · 2017-08-05T23:02:02

The best way to solve this problem is to update npm because it will update all the packages and install missing packages, as a result you will have laravel mix compiling your assets; right now you are not able to do so.

npm update

For some people an easier solution can work which is to run the watch-pol command

npm run watch-poll

Vue Components not showing/updating

5 Answers