Menu
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.
669
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With