Atlantic.Net Blog

How to Install Vue.JS on Fedora

Vue.js is an open-source, lightweight, and progressive JavaScript framework that offers intuitive API and world-class documentation. It provides an easier way to build user interfaces and single-page applications. It offers a lot of features, such as a range of tools, virtual DOM modeling, adoptable DOM manipulation benefits, and more.

In this post, we will show you how to install the Vue.js framework on Fedora.

Step 1 – Install Nodejs and NPM

First, you will need to install Node.js and NPM on your server. By default, Node.js and NPM are included in the Fedora default repo. You can install both using the following command.

dnf install -y nodejs npm

Once both packages are installed, you can verify the Node version using the following command.

node --version

Output.

v14.19.0

To verify the NPM version, run the following command.

npm --version

Output.

6.14.16

Step 2 – Install Vue CLI

Vue.js provides a CLI tool to create and manage the Vue.js website via the command line. First, install the Vue.js CLI with the NPM command.

npm install -g @vue/cli

After the successful installation, you can verify the Vue.js version with the following command.

vue --version

Output.

@vue/cli 5.0.8

Step 3 – Create a Website Using Vuejs

Let’s create a simple website named examplesite with the following command.

vue create examplesite

Once the website is created, you will see the following output.

Vue CLI v5.0.8
✨  Creating project in /root/examplesite.
βš™οΈ  Installing CLI plugins. This might take a while...


> [email protected] install /root/examplesite/node_modules/yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> [email protected] postinstall /root/examplesite/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

added 862 packages from 463 contributors and audited 863 packages in 119.173s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

πŸš€  Invoking generators...
πŸ“¦  Installing additional dependencies...

added 100 packages from 63 contributors and audited 963 packages in 17.628s

106 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

βš“  Running completion hooks...

πŸ“„  Generating README.md...

πŸŽ‰  Successfully created project examplesite.
πŸ‘‰  Get started with the following commands:

 $ cd examplesite
 $ npm run serve

Next, navigate to the examplesite directory and run the website using the following command.

cd examplesite
npm run serve

You will get the following output.

 DONE  Compiled successfully in 11251ms                                                                                                                       4:05:29 am


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

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

Step 4 – Access Vuejs Website

At this point, Vue.js is installed and running on port 8080. Now, open your web browser and access the Vue.js website using the URL http://your-server-ip:8080. You should see the Vue.js sample test page on the following screen.

vue.js

Conclusion

In this guide, we explained how to install Vue.js and create a simple website using Vue CLI. You can now use Vue.js. You can now explore the VUe.js features and start building a fast and user-friendly website quickly. Try to install Vue.js on VPS hosting from Atlantic.Net!

Get a $250 Credit and Access to Our Free Tier!

Free Tier includes:
G3.2GB Cloud VPS a Free to Use for One Year
50 GB of Block Storage Free to Use for One Year
50 GB of Snapshots Free to Use for One Year