How to Install Vue CLI on Ubuntu 20.04

VueJS is a popular JavaScript framework for building interactive web application user interfaces. It builds on top of standard HTML, CSS, and JavaScript, and is very easy to integrate with other projects and libraries. Vue CLI is a complete Vue development package.

In this tutorial, we will show you how to install Vue CLI and create a VueJS project on your Ubuntu 20.04 server.


  • A Ubuntu 20.04 VPS with root access enabled or a user with Sudo privileges.
  • Install Node.js version 8.9 or above (v10+ recommended)

Step 1: Log in via SSH and Update your System

First, you will need to log in to your Ubuntu 20.04 server via SSH as the root user:

ssh root@IP_Address -p Port_number

You will need to replace ‘IP_Address’ and ‘Port_number’ with your server’s respective IP address and SSH port number. Additionally, replace ‘root’ with the sudo username if necessary.

You have to make sure that all Ubuntu OS packages installed on the server are up to date. Run the following commands to upgrade all installed packages on your server:

apt-get update
apt-get upgrade

Step 2. Install Nodejs and NPM

Vue CLI comes as an NPM package. The first thing you need to make sure of is that Node.js and NPM are available on your system.

By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add the Node.js official repository to your system.

Add the Node.js repository with the following command:

curl -sL | bash -

And install the Node.js from the added repositories running the following command:

sudo apt-get install nodejs

Once NodeJS has been installed, you can verify the installed version of Node.js with the following command:

node -v

You should get the following output:


Once Node.js is installed, update the NPM to the latest version using the following command:

npm install npm@latest -g

You can now verify the npm version with the following command:

npm -v

You should get the following output:


Step 3. Install Vue CLI

Now install the Vue CLI package using NPM. This package helps to set all tools required to create a new project in VueJS.

npm install -g @vue/cli

Check the version with:

vue --version

You should get the following output:

@vue/cli 5.0.4

Step 4: Create your VueJS Application

You can create your VueJS application with the following command:

vue create my-project

You’ll be prompted with the following code:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

You can choose the default preset Vue 2 or Vue 3 project which comes with a basic Babel + ESLint setup or select “Manually select features” to pick the features you need.

Once the installation is finished, you should get the following output:

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve

Change the directory to the VueJS application:

cd my-project

Now you need to start your VueJS application with the following command:

npm run serve

You should get the following output:

 DONE  Compiled successfully in 10295ms

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

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

By default, the VueJS application starts on port 8080.

Step 5: Create a Systemd Service File for VueJS App

Next, you need to create a systemd service file to manage the VueJS service. You can create it with the following command:

nano /lib/systemd/system/vuejs.service

Add the following lines:

ExecStart=npm run serve -- --port=8080


Save and close the file, then reload the systemd service with the following command:

systemctl daemon-reload

Next, start the VueJS service and enable it to start at system reboot with the following command:

systemctl start vuejs
systemctl enable vuejs

You can verify the status of the VueJS service with the following command:

systemctl status vuejs

You should get the following output:

● vuejs.service
Loaded: loaded (/lib/systemd/system/vuejs.service; static; vendor preset: enabled)
Active: active (running)
Main PID: 11730 (npm run serve -)
Tasks: 19 (limit: 2245)
Memory: 37.3M
CGroup: /system.slice/vuejs.service
├─11730 npm run serve --port=8080
├─11743 sh -c vue-cli-service serve "--port=8080"
└─11744 node /root/my-project/node_modules/.bin/vue-cli-service serve --port=8080

Step 6: Access VueJS Web UI

Now, open your web browser and type:


You should see your VueJS Application on the following screen:

We hope that today’s guide has made it easier for you to install Vue CLI on Ubuntu 20.04. Now, we’d like to hear your feedback.

Do you feel like we’ve missed something, or is there a part of the process that you’d like us to elaborate on? Are there other subjects or tutorials you’re interested in that we should feature?

Don’t hesitate to let us know your thoughts in the comments section below.

Leave a Comment