How to change the host and port of your Nuxt apps

With Nuxt 3¶

To update the host for your Nuxt 3 project locally, update nuxt.config.js to add the devServer option.

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  devServer: {
    host: 'custom-host.test',
  },
})

Your Nuxt app with now be accessible at the host you define here.

It's just as easy to change the port, too. Once again, within the devServer object in your Nuxt configuration file:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  devServer: {
    host: 'custom-host.test',
    port: 6969,
  },
})

Bear in mind the port you choose must not already be in use.

Finally, re-run npm run dev and your chosen host and port will now be accessible!

With Nuxt 2¶

Add the following to your package.json file under the scripts section.

"dev-host": "nuxt --hostname yourdomain.test --port 3333",

Overall, your scripts section should look like this.

"scripts": {
    "dev": "nuxt",
    "dev-host": "nuxt --hostname yourdomain.test --port 3333",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
},

Of course, yourdomain.test can just be replaced with whatever domain you'd like to use. You can also change the name of the command from dev-host to whatever you'd prefer.