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 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.