Nuxt3 HMR not working, page reload needed for HMR to fire

Question

I've installed and run Nuxt3 by

npx nuxi init <project-name>
cd <project-name>
npm i
npm run dev

This appeared in console:

Nuxi 3.0.0                                                                                                                                                                                                                                                    09:52:01
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                                                                                                                                   09:52:01
                                                                                                                                                                                                                                                              09:52:01
  > Local:    http://localhost:3000/ 
  > Network:  http://172.17.181.194:3000/

✔ Nitro built in 374 ms                                                                                                                                                                                                                                 nitro 09:52:03
ℹ Vite client warmed up in 1341ms                                                                                                                                                                                                                             09:52:03

After making a change in app.vue and hitting save, nothing happend.

Then when I click reload in chrome, this appears in the console and the page shows the right data:

✔ Vite server hmr 6 files in 20.051ms 09:52:30

I have node v18.3.0. Tried the same process on node v16.15.1.

Answer 1

I spend hours trying different settings, but the problem - Nuxt ignoring your hmr settings. (Nuxt 3.8.2) So you just need extend vite config in hook:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  ssr: false,
  css: [
    'bootstrap/dist/css/bootstrap.min.css',
    '~/assets/scss/main.scss',
  ],
  vite: {
    server: {
      // In my case I use Nginx reverse proxy
      // with self signet certificate (mkcert)
      // so I just want this works on localhost:3000
      // but these settings ignoring. You can check hmr is false
      // in 'vite:configResolved' hook
      // And the most efficient and elegant way to fix it is
      // override vite config in 'vite:extendConfig' hook below
      hmr: {
        protocol: 'ws',
        host: 'localhost',
      },
    },
  },
  hooks: {
    'vite:extendConfig' (viteInlineConfig, env) {
      viteInlineConfig.server = {
        ...viteInlineConfig.server,
        hmr: {
          protocol: 'ws',
          host: 'localhost',
        },
      }
    },
  },
})

Answer 2

I had to change vite.server.hmr.port from 3000 to something different in

nuxt.config.ts

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                port: 3008
            }
        }
    }
})

Apparently port 3000 was already being used.