How to Install Vue.js on Ubuntu 22.04 LTS

Vue is a progressive JavaScript framework that makes it easy for anyone with some knowledge of HTML and CSS to create beautiful web applications. With Vue’s various tools, you can build your project in no time!

In the following tutorial, you will learn how to install Vue.js on Ubuntu 22.04 LTS Jammy Jellyfish using the command line terminal using the NodeSource repositories as the source for NodeJS and NPM.

Update Ubuntu

First, before anything, update your system to ensure all existing packages are up to date to avoid any conflicts.

sudo apt update && sudo apt upgrade

Install Required Dependencies

Next, to ensure the installation goes smoothly following our tutorial, run the following command, which will install any missing packages that may be required.

sudo apt install curl gnupg2 gnupg git wget -y

Install Node.js

The best method for working with the Vue.js framework is using the most up-to-date LTS versions of Node.js. Still, for the tutorial, you will install the NodeSource repository and the latest LTS version available on your system.

Import the repository self-set up the script using the following command, which will also execute it.

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

Next, run a quick APT update to reflect the newly added imports.

sudo apt update

Now that you have installed the repository install Node.js as follows.

sudo apt install nodejs

Confirm the version and build of Node.js that was installed.

node --version

Lastly, ensure your NPM is up-to-date using the following command; this is critical; do not skip.

sudo npm install npm@latest -g

Install Vue.js

Use the following command to install the Vue.js CLI tool.

sudo npm install -g @vue/cli

Once installed, verify the version using the following command.

vue --version

Create VueJS Project

Once you have successfully installed Vue.js, you will create a quick project.

First, create a new project; remember to change {project-name} to something else.

vue create {project-name}

Second, access the folder created with the name of the project.

cd {project-name}

Next, create and serve the project with the following command.

vue ui

For local environments, use localhost or for domains, use the domain name.

Example output:

How to Install Vue.js on Ubuntu 22.04 LTS

Access Vue.js Web Interface

Once the test project you created is delayed and listening on port 8088, you can now access it on the URL from your browser.

### Domain Access ###
http://example.com:8088

### IP Address ###
http://server-ip:8088

### Local Environments ###
localhost:8088

Once you arrive, you should see the following screen.

How to Install Vue.js on Ubuntu 22.04 LTS

Comments and Conclusion

In short, Vue.js is a progressive JavaScript framework which can be used to develop reactive web applications quickly and easily. It comes with an extensive range of features and libraries that make it an ideal choice for modern web development. If you are looking for an easy-to-use, versatile, and powerful frontend framework, then Vue.js should definitely be your go-to choice!



Follow LinuxCapable.com!

Like to get automatic updates? Follow us on one of our social media accounts!