Laravel Example.vue not updating - laravel-5

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

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 2

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 3

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 4

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 5

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 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 :)

Answer 7

I had the same issue, I was using XAMMP and tried "php artisan serve" instead, that worked for me.