Fix Hot Module Reloading in Nuxt 3

HMR Not Refreshing Page in Nuxt 3

If your Nuxt 3 Hot Module Reloading is not working, it’s likely due to a conflict with your client ports. This is usually the issue if your project lives in a Docker container or you are developing remotely over SSH, either with VS Code or another editor. 

The first place to look for a port conflict is in the browser’s development console log. You can bring up the Dev Tools by pressing CTRL + SHIFT + I or F12.

Check for error GET http://localhost:24678/_nuxt/ net::ERR_CONNECITON_REFUSED

If you see the error above, you will need open port 24678, so the Nuxt client can communicate with your backend server. Alternatively, you can set HMR to use different ports.

Change Nuxt 3 HMR Port

To change the Nuxt 3 HMR port, we will need to edit the nuxt.config.ts file.

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                 clientPort: 24600,
                 port: 24600
            }
        }  
    }
})
      
        Copied  
        
      
    

In the code above, the clientPort and port variables need to be a port you already have open. 

Forward a Port in VS Code

If you’re using VS Code, you may need to open additional ports for HMR to work correctly. Once you have remote SSH setup, you must add a line to your SSH Config file.

• Hit CTRL + SHIFT + P
• Type SSH Configuration
• Click Remote-SSH: Open SSH Configuration File
• Inside the .ssh_config file, add LocalForward 127.0.0.1:24678 127.0.0.1:24678

The default port for Nuxt 3 HMR is 24678, but you can change this to any port you like as long as you match it to the HMR port set inside your nuxt.config.ts in the section above.

Additional Help

Nothing is worse than setting up a brand-new project and having something break before you’ve even coded anything. When booting up a Nuxt 3 project, you might be immediately presented with an issue with your Hot Module Reloading. Although it’s not critical to the function of your project, not having HMR will drastically slow down your development time. If the fix above didn’t help you and you have a more specific issue with your HMR, check the posted issues on the official Nuxt GitHub. Make sure to search the posted issues before posting one of your own. 

We hope this guide helped you fix your problem. Check out our JavaScript section to get more fixes, tips, tricks, and more.