Hot Module Reload (HMR) Issues

HMR issues after creating new Vue app via vue-cli. Hot Module Replacement (HMR) exchanges, adds, or removes modules while an aplication is running, without a full reload. Ultimately, this significantly improves development efforts.

- August 28, 2020

Rest of the Story:

Using latest vue.js bit and vue-cli to create a project, I immediately came up against HMR not reloading after making changes to .vue files.

What is HMR "Hot Reload" is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a *. vue file, all instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped components!

I started my project npm run serve, opened my browser http://localhost:8080 and navigated around my new app. Great. Within my IDE I modified any vue file, I could see that vue-cli-server (with it’s built in web server) identified that a file had changed and I could see webpack rebuilding my ts/js files. Great. I looked at the browser and my simple html change was not reflected. I could see errors in the chrome dev tools network tab like following.


###Solution There are a number of articles regarding setting NODE_ENV=development, as well as articles discussing the vue.config.js file. The solution for me was modifying the package.json script that is used by npm to start the project from

"serve": "vue-cli-service serve",


"serve2": "vue-cli-service serve --host localhost",

I also tried a number of options within the vue.config.js but was able to remove once I identified the solution (above).

// vue.config.js 
module.exports = {
          {  //host:'localhost'  
              // useLocalIp: false,  
            // proxy: 'http://localhost:8080',  
            // public: '',  
            // watchOptions: {  
            // poll: true  
            // }  
            }, configureWebpack: {  
                      plugins: [
                      //new MyAwesomeWebpackPlugin()