How to change Nuxt 3 Port

In Nuxt 3, there are several ways to change the port the application runs on. By default, Nuxt 3 uses port 3000, but you can change it to other ports as needed. Here are several methods to change the port:

Method 1: Using the nuxt.config.ts or nuxt.config.js file

In the project's nuxt.config.ts or nuxt.config.js file, you can set the server property to specify the port. This is a straightforward and common method.

javascript
export default {
  server: {
    host: '0.0.0.0', // Default: localhost
    port: 8000 // Your new port number
  }
}

Save the file and restart the application; it will run on the new port.

Method 2: Using Environment Variables

You can also change the port by setting environment variables. This can be done directly via the command line or by configuring it in the .env file.

Command Line Method

When starting the project, you can set the PORT environment variable directly in the command line:

bash
PORT=8000 nuxt dev

This will start the development server on port 8000.

Using the .env File

If your project includes a .env file, add the following line:

shell
PORT=8000

Then, when you run the nuxt command, it will automatically read the port configuration from the .env file.

Method 3: Defining the Port in the Startup Script

In the scripts section of the package.json file, you can specify the port:

json
"scripts": {
  "dev": "nuxt --port 8000",
  "build": "nuxt build",
  "start": "nuxt start --port 8000"
}

Using this method, when you run npm run dev or npm start, the Nuxt 3 application will launch on the specified port.

Conclusion

These methods offer flexibility for changing the port of a Nuxt 3 application across various scenarios. Whether through configuration files, environment variables, or modifying npm scripts, you can select the appropriate method based on project requirements and deployment environment. During development, you may need to change the port multiple times to avoid conflicts or satisfy specific network configuration requirements.