Javascripts

How to Install Vue CLI on Ubuntu 20.04

In this article, we’ll explain how to install Vue CLI on Ubuntu 20.04.

Vue.js is an open-source model–view–viewmodel front end JavaScript framework. This article will guide you the installation process and creating hello world first project.

Prerequisites

Install Vue CLI on Ubuntu 20.04

1 - Keep the server up to date

# apt update -y

2 - Download NodeJS

Download latest stable release of NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

3 - Install NodeJS

Next, install the NodeJS using following command:

# apt-get install -y nodejs

4 - Verify the installation

# node -v && npm -v

Output:

v15.9.0
7.5.4

5. Install Vue CLI

Following command will install Vue CLI.

# npm install -g @vue/cli

Verify the installation:

# vue --version

Output:

@vue/cli 4.5.11

6. Create Vue project

# vue create hello-world

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features' to pick the features you need.

Output:

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

Successfully created project hello-world.
Get started with the following commands:

# cd hello-world
# npm run serve

Output:

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

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

Navigate to your browser and open http://[server_IP]:8080.

Install Vue CLI on Ubuntu 20.04

That’s it. The installation has been completed.

In this article, we have seen how to install Vue CLI on Ubuntu 20.04.

Related Articles