CODEWITHSUNDEEP
laravelvue.jsvuejs2vue-component
Vedran Korponajić
Vedran Korponajić

Reputation: 377

Vue Components not showing/updating

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.

Upvotes: 7

Views: 23559

Answers (5)

Mohsin G
Mohsin G

Reputation: 41

I was deleting the browser history every day to see changes made in the editor so I searched for a solution.

All you need to do is:

  1. Go to developer tools.
  2. Click on the Network tab
  3. Click disable cache (Look at the highlighted portion in the image below)
  4. Refresh your page again!

dev tools screen shot

Upvotes: 1

mukeshsoni
mukeshsoni

Reputation: 583

Sometime copying code from internet we add some unwanted line. Just check this line from App/Config/app . Make sure it is in Development mode.

'env' => env('APP_ENV', 'development'),

Upvotes: 0

wafutech
wafutech

Reputation: 551

Have you tried to clear browser cache? This should solve the problem.

Upvotes: 4

Jordao Manguena
Jordao Manguena

Reputation: 124

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

Upvotes: 9

Othmane
Othmane

Reputation: 1

copy this code in app.blade.php : 

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

Upvotes: -6

Related Questions