CODEWITHSUNDEEP
nuxt.jsvite
jojugaad
jojugaad

Reputation: 153

How to config vite HMR port in Nuxt3 config?

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?

Upvotes: 7

Views: 16048

Answers (5)

Andy Cox
Andy Cox

Reputation: 1296

In addition to exposing the 24678 port in docker-compose, on a Windows system using WSL, you need to add the following to nuxt.config.ts:

  vite: {
    server: {
      watch: {
        usePolling: true
      }
    }
  }

And I also changed my Dockerfile CMD command to:

CMD npm run dev -- --host 0.0.0.0

This second step is not strictly necessary but exposes the dev server externally to ease testing on other devices.

I initially found this information in this comment.

Additional references:

  1. https://vite.dev/config/server-options.html#server-watch
  2. https://github.com/microsoft/WSL/issues/4739

Upvotes: 0

Mina
Mina

Reputation: 17484

You can add this hook in the nuxt.config file to make sure that the Nuxt3 application uses WebSocket protocol (wss) when running.

  hooks: {
    'vite:extendConfig': (config) => {
      if (typeof config.server!.hmr === 'object') {
        config.server!.hmr.protocol = 'wss';
      }
    },
  },

Upvotes: 0

Ronald Kimeli
Ronald Kimeli

Reputation: 51

Nuxt3 with Docker compose July 2023

  • Edit nuxt.config.ts to allow vite to run our application
export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    server: {
      hmr: {
        protocol: 'ws',
        host: '0.0.0.0',  
      }
    }
  }});
  • In docker-compose.yml file, expose port 24678 which is nuxi based port like this. Default Port 3000 for Nuxt app(Port 24678 is vite dev Server)
    ports:
      - 3000:3000
      - 24678:24678

Expose different port apart from 3000, chose 8000

  • Edit nuxt.config.ts and expose port 8000
export default defineNuxtConfig({
  devtools: { enabled: true },
devServer: {
    host: "0.0.0.0",
    port: 8000, // you can replace this port with any port
  }});
  • In docker-compose.yml file,expose port 8000 this way.
    ports:
      - 8000:8000

Upvotes: 1

Ali Kasmou
Ali Kasmou

Reputation: 31

you need to add this port beside the main port like in your docker-compose.yaml

ports:
  - "3000:3000"
  - "24678:24678"

also be sure the vite config is like

//nuxt.config.{js,ts}
export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        protocol: "ws",
        host: "0.0.0.0",
      },
    },
  },
});

Upvotes: 3

Oliver
Oliver

Reputation: 3138

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',
    }
  }
}

Upvotes: 11

Related Questions