Laravel Example.vue not updating

Question

I'm trying to figure out how to use Vue in a Laravel 5 project. Basic Laravel install ships with app.js and Example.vue. I was able to have the "I'm an example component!" show up in my view by adding to home.blade.php. What's mystifying me is that I can't change this component at all, among other issues.

If I change the text in the Example.vue (just in the template part, not the logic) it doesn't update at all. (I've tried running npm run dev as per Laravel docs, etc, and it seems to compile without errors, and /public/js/app.js is modified at that time, but the view in the browser doesn't change.)

When I modify app.blade.php, those changes show up, as do changes in home.blade.php. However, I can't find evidence that changing the content of /resources/assets/js/app.js or Example.vue has any effect. Even more confusing, if I remove the id="app" from app.blade.php div element, this does not cause the Example component to disappear. Based on playing with the vue jsfiddle, it seems like this should break the component.

I'm not sure if it's some sort of caching issue, or compile issue, or I'm not understanding the way vue works, or what, but I have no idea what's going wrong. I'm using the webpack.mix.js file straight out of the laravel installation, and I tried halting and restarting vagrant, and reloading the browser, and php artisan cache:clear. (Earlier I tried using Elixir instead of Mix, and vueify and gulp, same issue.)

Any suggestions would be much appreciated!

Answer 1

This worked for me:

You may find that in certain environments Webpack isn't updating when your files change. If this is the case on your system, consider using the watch-poll command:

npm run watch-poll

See more here

Answer 2

With a simple Vue.js project we serve the project via npm run serve which also simultaneously runs the npm watcher. The watcher watches for changes in the Vue.js project. Since we are serving via php artisian serve we also need to run npm run watch because php artisan serve only watches for Laravel changes.

The solution is running php artisan serve and npm run watch together while you're changing your development project.

Install: npm install npm-watch

Answer 3

did u try to open ur console from browser (F12) then go to network and check and uncheck the disable cache then reload your page. something your browser using your old storage files.

Answer 4

I had the same exact problem. I'm using a local development environment (Mac OS X Sierra with php7 and mysql). I tried cache cleaning as stated above. Stopped and restarted the php server (just in case..): no luck. Then 'composer dump-autoload': problem persisted. Then 'npm run watch', which gave the folowing messages:

> @ watch /Users/ulam/code/myproj
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active Webpack is watching the files…

 95% emitting

 DONE  Compiled successfully in 4171ms

and then:

nks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                               /js/app.js   1.2 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css   147 kB       0  [emitted]         /js/app


 WAIT  Compiling...                                                                                            19:48:26

 95% emitting

 DONE  Compiled successfully in 86ms                                                                           19:48:26

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  1.2 MB       0  [emitted]  [big]  /js/app
/css/app.css  147 kB       0  [emitted]         /js/app


 WAIT  Compiling...                                                                                            19:49:37

 95% emitting

 DONE  Compiled successfully in 121ms                                                                          19:49:38

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  1.2 MB       0  [emitted]  [big]  /js/app
/css/app.css  147 kB       0  [emitted]         /js/app

Everything then worked. (Laravel 5.5.3)

Answer 5

I have exactly the same issue. Disabling the cache, deleting caches and views doesn't help. I'm developing on a shared hosting site using Laravel 5.4.

The comments for this video https://www.youtube.com/watch?v=pTVCW5k4piU suggest npm install and npm run watch. Following the instructions on this page https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/ I was able to get npm install to work, but npm run watch gave me errors.

It really looks like Vue components are going to be the best solution for what I want to do, but if I can't get them working for me, I'm going to have to just go with AJAX.

Answer 6

I also faced similar issues when working with laravel and vuejs:

Step1. check if npm run watch and npm run watch-poll is working or not.

Step2. If Your app.js file is big your browser is probabaly caching it. Clear Browser cache using CTRL+F5 and CTRL+SHIFT+F5 (ON CHROME).

Step3. This method is good for cache busting. Add .version() in webpack.config.js.

Eg. mix.js('resources/js/app.js','public/js').vue().sass('resources/sass/app.scss', 'public/css').version();

Your Script will be like: <script src="{{ mix('js/app.js') }}" defer type="text/javascript"></script>.

This will remove all cache problems :)