How To Install Vue.js on Ubuntu 22.04 LTS

In this tutorial, we will show you how to install Vue.js on Ubuntu 22.04 LTS. For those of you who didn’t know, Vue.js is a progressive JavaScript framework that is reactive and simple to learn. It provides various tools and libraries that are really awesome to adapt and learn. Vue.js helps in building web applications with the knowledge of JavaScript, HTML, and CSS in no time.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you the step-by-step installation of the Vue.js framework on Ubuntu 22.04 (Jammy Jellyfish). You can follow the same instructions for Ubuntu 22.04 and any other Debian-based distribution like Linux Mint, Elementary OS, Pop!_OS, and more as well.

Prerequisites

• A server running one of the following operating systems: Ubuntu 22.04, 20.04, and any other Debian-based distribution like Linux Mint.
• It’s recommended that you use a fresh OS install to prevent any potential issues.
• SSH access to the server (or just open Terminal if you’re on a desktop).
• A non-root sudo user or access to the root user. We recommend acting as a non-root sudo user, however, as you can harm your system if you’re not careful when acting as the root.

Install Vue.js on Ubuntu 22.04 LTS Jammy Jellyfish

Step 1. First, make sure that all your system packages are up-to-date by running the following apt commands in the terminal.

sudo apt update
sudo apt upgrade
sudo apt install build-essential curl

Step 2. Installing Node.js.

Now add the Node.JS repository using the command below:

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

After the repository is added successfully, run the following command to install Nodejs on Ubuntu 22.04:

sudo apt install nodejs

The next step is to update the npm version:

sudo npm install npm@latest -g

Confirm the npm and node are installed with the command:

npm -v
node -v

Step 3. Installing Vue.js on Ubuntu 22.04.

By default, the Vue.js is not available on Ubuntu 22.04 base repository. Now install Vue.js on Ubuntu using the npm command:

npm install vue@next

In the second method, you can install the Vue CLI package using NPM. This package helps to set all tools required to create a new project in VueJS:

sudo npm install -g @vue/cli

Confirm the installation and check the installed build version of Vue.js:

vue --version

Step 4. Create Vue.js Application.

You can create your Vue.js application with the following command below:

vue create idroot-project

Output:

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

Choose a preset (Vue 3 is the latest one and preferred), Next, change the directory to the VueJS application:

cd idroot-project

Now you need to start your Vue.js application with the following command:

npm run serve

Output:

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

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

Once successfully installed, navigate to your browser and open using the URL http://192.168.77.20:8080

Congratulations! You have successfully installed Vue.js. Thanks for using this tutorial for installing the Vue.js progressive JavaScript framework on Ubuntu 22.04 LTS Jammy Jellyfish system. For additional help or useful information, we recommend you check the official Vue.js website.