How Do I Install Vue.JS 2019

Reading Time: 5 minutes

In this article, we review the history, use, installation, and implementation of Vue.JS in a web development environment. Vue.js is an open-source, JavaScript progressive framework that is primarily used for building user interfaces and single webpage applications.

What Exactly Is Vue.JS?
A Short History

Unlike other monolithic frameworks, Vue.JS is designed from the ground up to be incrementally adoptable. Its core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Web Applications. 

Vue.js was created by Evan You, a Google developer, who after working on multiple Angular.js projects, concluded that:

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.”

“Between the Wires | Evan You”. Between the Wires. November 3, 2016. Archived from the original on June 3, 2017

The first appearance of Vue source code commits date back to July 2013, and the official release was in February of  2014.

Why Use Vue.JS

  1. Because Vue uses an HTML based template pattern which allows for the rendering of webpage DOM elements to be attached to the underlying Vue instance’s data.
  2. All of the Vue templates use valid HTML that can be interpreted by a normal browsers.
  3. Lastly, because Vue is open-source, the support community is extensive. Because the user community is large, there exists a quick way to find solutions for bugs that may be encountered in your Vue application.

In the picture below, you can see how “Standard Web Sites” work.

standard

A request is made from a browser to a server, and the server sends back the data to the browser. But what happens if you click on another link on that site? 

The cycle is repeating, so each time you click on a link: a new request is sent to the server, which then sends the data back to the browser and shows the updated content. 

Can this be bypassed? 

Yes, it can !!

The way that data travels when using Vue is the same as on the image above but, with one significant improvement. Once the site is loaded in a browser, all of the other requests that are made on the page are done in DOM. This means each request using Vue, can reach all of the other elements easily.

Vue compiles the templates into a virtual Document Object Model or shortened “DOM”, which allows Vue to render page components in its memory before updating the browser. Combined with the ability to react to a platform (mobile, tablet or desktop), Vue is able to calculate the minimal number of components that need to be rendered and then applies the minimal amount of manipulation needed when the app changes it state. This way Vue makes sites feel smoother without additional complexity. 

Getting Started with Vue JS on Liquid Web Servers

Requirements or Dependencies?

You can utilize Vue.JS on any type of server but, this tutorial focuses mainly on using a Centos 7 server with cPanel. Officially there are no external dependencies needed for VueJS to work. 

How Do I Use Vue? 

Direct <script> Include
It’s simple as importing a bootstrap css into your HTML template. 

<html>
  <head>
    <title>Vue.js Basics</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>

    <h1>Vue Basics</h1>
    <div id="app"> </div>

    <script src="app.js"></script>
  </body>
</html>

Cpanel installation via Softaculous

Login to your cPanel account via example.com/cpanel

Scroll down to the Softaculous Apps Installer and click on it.

softac
cPanel Main Screen

Once the Softaculous page loads, click on the search field in the upper left-hand corner and type “Vue”

softac2
Softaculous Main Screen

Next, click the “Install Now” button.

softac2
Click Install

After clicking the Install Now button, follow the steps on the next page by filling in the needed information. 

  • Choose the Protocol from the dropdown menu which you want to use.
  • Choose the domain from the dropdown menu on which you want to install – Choose the latest stable version of Vue.js (2.6.10)
  • Choose the directory in which you want to install Vue.js libraries 
  • Click Install

Finish – If all went well and there were no errors during the installation, you can visit example.com and image should show like the one below which means that the Vue.JS is installed correctly. 

Commandline Installation

Requirements For Centos 7.X

To be able to install Vue via the command line, there are some requirements. 

  1. Node.js (6.x – 8.x preferred)
  2. npm version 3.x+
  3. Git ( it should be installed by default on new Cpanel servers )
    1. If it’s not by any chance you can follow this tutorial  https://www.staging.liquidweb.com/kb/how-to-install-and-configure-git-on-centos-7/

If Node is not installed, let’s start by installing it.  First SSH to your server as the root user

Warning:
Always trust and verify the commands you are installing from an external bash source. Running a bash command from a malicious external source (especially as root) can cause undesirable effects up to and including data loss!

Next, type the command : 

[root@host ~]# curl  -sL https://rpm.nodesource.com/setup_12.x | bash -

The setup_12.x section in the above URL indicates the version of the Node JS package we will be installing. A complete list of the versions can be found at https://rpm.nodesource.com 

After we download the repository we can install the NodeJS with the following command:

[root@host ~]# yum install -y nodejs gcc-c++ make 

If there were no errors we can check the version of the NodeJS installed with the following command: 

[root@host ~]# node --version 

Also, we need to check NPM version 

[root@host ~]# npm --version 

If all of the prerequisites comply with the requirements, we can now move to the actual Vue CLI install.

To install the Vue 2 CLI the command is following. 

[root@host ~]# npm install -g vue-cli 

The output should be similar to this one :

cli1

Now that we have installed Vue globally, we can start creating our project. 

Creating a Vue 2 Project

After we have installed Vue.JS 2, we can now start building a project. 

Since we are already SSH’d into our server as the root user, we can start building our project by su’ing back to the local cpanel account/user we originally installed vue on. Let’s login to that user with the following command : 

[root@host ~]# su $user 

Next, we’ll navigate to our domain’s document root folder; home/$user/public_html

[root@host ~]#cd /home/nnewell/public_html 

Now that we are inside the document root, we can type the command:

[root@host ~]# vue init webpack lwvue-project

After we type the command we will be asked the following Questions:

Project name: lwvue-project
(press enter after all questions to move ahead)

Project description: A new Vue.js project

Author? add your name (if you so choose as the owner)

Vue build standalone? Runtime + Compiler: recommended for most users

Install vue-router? Yes

Use ESLint to lint your code? Yes

Set up unit tests? Yes

Pick a test runner? karma

Setup e2e tests with Nightwatch? Yes
S
hould we run npm install for you after the project has been created? (recommended) npm

Completed Setup

Now that we have started our project we will need to spin the server for development so we can test it out. 

[root@host ~]# npm run dev 

That will start the server on http://localhost:8081 by default 

For making a production build of our app we would need to run the following command from inside our project folder

[root@host ~]# npm run build 

If everything goes well the /dist folder should be created and you can basically move all the files from there to our /public_html folder since the Vue apps can be served via any HTTP server. 

And that’s it!

We know that there is already a Vue 3 version, but we will cover that version in an upcoming article for our knowledgebase. In that article, we will touch on the basics and a little bit more development with Vue.JS 3. 

Documentation and other useful Articles : 
https://vuejs.org/
https://vuejs.org/v2/guide/
http://demo.softaculous.com/enduser/index.php?act=js&soft=580
https://github.com/vuejs/vue-cli/tree/v2#vue-cli–
How to Install and Configure Git on CentOS 7

Aditional Video
https://youtu.be/5LYrN_cAJoA?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa

Need More Help?

Our Support and Solutions Teams are filled with talented systems administrators with an intimate knowledge of this and other web hosting technologies. If you are uncomfortable walking through the steps outlined here or are just looking for further feedback, we are just a phone call, chat or ticket away from providing you info you need.
Call us at 1.800.580.4985 

3 Tips For Working With a MySQL Database!

Reading Time: 2 minutes

Pre-Flight Check

  • These instructions are intended for deleting a MySQL database on Linux via the command line.
  • I’ll be working from a Liquid Web Core Managed CentOS 7 server, and I’ll be logged in as root.

Continue reading “3 Tips For Working With a MySQL Database!”

Utilizing The ifconfig Command In CentOS 7

Reading Time: 3 minutesManaging the network on your servers can be cumbersome, time consuming and, involve a wide range of configurations. Thankfully, there are a handful of tools to help with these configurations. The tool we will be focusing on in this article is Ifconfig

Continue reading “Utilizing The ifconfig Command In CentOS 7”

SQL Databases Migration with Command Line

Reading Time: 3 minutesWhat if you have dozens of SQL databases and manually backing up/restoring each database is too time-consuming for your project? No problem! We can script out a method that will export and import all databases at once without needing manual intervention. For help with transferring SQL Logins and Stored Procedures & Views take a look at our MSSQL Migration with SSMS article. Continue reading “SQL Databases Migration with Command Line”

How to Remove (Delete) a User on Ubuntu 16.04

Reading Time: < 1 minuteUser management includes removing users who no longer need access, removing their username and any associate root privileges are necessary for securing your server. Deleting a user’s access to your Linux server is a typical operation which can easily be performed using a few commands.   Continue reading “How to Remove (Delete) a User on Ubuntu 16.04”

Whitelisting in ModSecurity

Reading Time: 6 minutesBroken down into two parts our article’s first section hits on “how to whitelist IPs or URIs,” for people who are somewhat familiar with ModSecurity but want to know further about the process. Our second section examines why we configure ModSecurity and how to prevent the security of the server from getting in the way of our work. If you have a Fully Managed Liquid Web server reach out to our Heroic Support team for assistance with whitelisting! Continue reading “Whitelisting in ModSecurity”

How to Add a User and Grant Root Privileges on Ubuntu 16.04

Reading Time: 2 minutesUbuntu 16.04 LTS provides you the ability to add a user for anyone who plans on accessing your server.  Creating a user is a basic setup but an important and critical one for your server security. In this tutorial, we will create a user and grant administrative access, known as root, to your trusted user. Continue reading “How to Add a User and Grant Root Privileges on Ubuntu 16.04”

Accessing man pages on Ubuntu 16.04 LTS

Reading Time: 2 minutesHaving access to man pages on your server is a pretty essential asset to be familiar with. If you’re not familiar with man pages they are documentation provided with software packages on Unix systems. They provide a sort of manual for applications, services and system resources. You can learn more about man pages in our introductory article. By default on Ubuntu based servers this command is not provided, since it’s a great tool to have access to this article will help you get them setup.

Continue reading “Accessing man pages on Ubuntu 16.04 LTS”