Laravel-Mix with BrowserSync working with everything apart from Vue.js Components

Question

• laravel-mix@4.1.4
• Node v12.16.2
• NPM v6.14.4
• OS: Laravel Homestead

Description:

Running npm run watch works like a charm, whenever I do updates on views, controllers, models, etc. It auto refreshes and saves time. However with.vue files, its another story. I'm doing updates to my component, the browsers detected the changes and reload. But not with the updated code, it's like its caching or not compiling the app.js after changes.

When I 'ctrl+c' out of 'npm run watch' and run it again. It shows the updated code. The problem is that every time I do an update. I have to run 'npm run watch' or 'npm run dev'.

I've spent hours today, going through tutorials and making changes to the webpack.mix.js file. I've now hit a brick wall....

My webpack.mix.js file

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .sourceMaps()
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
    host: '192.168.10.10',
    proxy: 'mywebsite.test',
    open: false,
    injectChanges: true,
    logSnippet: true,
    watchOptions: {
        usePolling: true,
        interval: 500,
        poll: true,
        ignored: /node_modules/
    },
    files: [
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/js/app.js',
        'resources/js/components/*.vue',
        'packages/mixdinternet/frontend/src/**/*.php',
        'public/js/**/*.js',
        'public/css/**/*.css'
    ]
});

Browser Sync

DONE  Compiled successfully in 7276ms                                                                        4:05:50 PM

          Asset      Size        Chunks             Chunk Names
   /css/app.css   177 KiB       /js/app  [emitted]  /js/app
     /js/app.js  2.92 MiB       /js/app  [emitted]  /js/app
/js/manifest.js  6.12 KiB  /js/manifest  [emitted]  /js/manifest
  /js/vendor.js   885 KiB    /js/vendor  [emitted]  /js/vendor
[Browsersync] Proxying: http://mywebsite.test
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...

Just to clarify, browserSync works with everything apart from the.vue files not getting compiled into app.js. I need to somehow force it to recompile after I do an update on a.vue file.

Answer 1

I managed to make it work by using another command from package.json :

"scripts": {
    "hot": "mix watch --hot",
}

So you then run npm run hot and browsersync starts reloading even components