How to change Vue CLI default port number

This is a quick post on how you can change the default port i.e. 8080 while running a Vue app via npm.

When you run npm run serve on your vue-cli project it runs on port 8080, if that port is busy it shifts the number by 1 and tries to run it on port 8081 and so on.

default port 8080 vue-cli

Changing the default Port

To change the default port.

Livewire Component Library
    1. Create a new file in the project root directory named vue.config.js
    2. Add the following code, replace the port number of your choice.
module.exports = {
    devServer: {
        port: 6058

Now, run the app using npm run serve command, your port number is successfully changed.

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.
 DONE  Compiled successfully in 4099ms                                                                                                                                                                                            4:46:41 PM

  App running at:
  - Local:   http://localhost:6058/ 
  - Network:

  Note that the development build is not optimized.
  To create a production build, run npm run build.

If you want to change the port number temporarily, you can add a –port option to npm run serve command.

npm run serve -- --port 6058

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer