How to config vite HMR port in Nuxt3 config?

Question

I'm using Nuxt3 within a Docker compose setup where port 8001 is the accessible port for the node container running Nuxt3 channeled via an nginx reverse proxy.

My nuxt.config.ts looks like this:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                clientPort: 8001,
            }
        }
    }
})

Somehow it seems the clientPort setting for the HMR of vite is not picked up by Nuxt3. The page is constantly reloading in the dev setup.

Any idea whether I've misconfigured this or this is not yet possible in Nuxt3?

In a similar setup with Vue this setting in the vite.config.js is working properly?

Answer 1

The issue is caused by Vite (by default) using port :24678 and this being blocked by Docker, causing Vite to error out and hard-reload. To fix the issue you simply need to ensure that the relevant port is exposed and accessible.

As per this GitHub issue you can add the following to your Docker compose file (specifically to the Nuxt3 service, not the nginx service):

# Your Nuxt 3 service

  ports:
    - "24678:24678" # or in your case: - "8001:8001"

You may also need to add in a vite.config.js file to the root of your Nuxt3 folder, with the following:

export default {
  server: {
    hmr: {
      protocol: 'ws',
      host: '0.0.0.0',
    }
  }
}