Vue.js hot reload not detecting changes

Question

The hot reload of my Vue.js app isn't refreshing when I save modifications to a file.

$ npm serve
 DONE  Compiled successfully in 469ms


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://localhost:8080/

vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

There isn't any WSD errors in the console. It's not deconnected or anything.

score 1 · Accepted Answer · answered Dec 07 '22 at 17:08

I found the solution.

I am using WSL2 and my files are stored on the windows partition (C:/).
It seems that linux webpack doesn't see file changes if they are not on Windows FS.

So I deleted my node_modules and re-installed everything from powershell.
Did npm serve from powershell and it worked. Hot reload was back.

So if you still wish to use WSL2 I guess that you should move your project file over to WSL2 file-system.

Vue.js hot reload not detecting changes

1 Answers1