Installation process, Setup, and How to use Vue.js?

3 min readJun 24, 2020

Photo by Caspar Camille Rubin on Unsplash

Vue js is easier to install and setup on your machine. The installation process is more easier than other popular front end frameworks like react and angular.

Vue.js have 4 type of installation

1. As an external <script> import or locally setup

Simply download Vue and include a script tag on your HTML file. Vue will be registered as a global variable.

vue have two type of versions:

Development Version — click here for download
Production Version — click here for download

<html>
  <head>
    <script src="vue.js">
  <head>  <body>
  </body>  <script>
    const vue_app = new Vue()
  </script>
</html>

Script import must be above the Vue object declaration, the best way/practice is to include the script in the head tag and declare Vue object bellow body tag with<script></script> tag.

Don’t use the minified version during development. You will miss out on all the nice warnings for common mistakes!

2. CDN

For prototyping or learning purposes, you can use the latest version with:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">   import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script>

Vue is also available on unpkg and cdnjs (cdnjs takes some time to sync so the latest release may not be available yet).

CDN script acts like a similar with locally imported script, the best way/practice is to include the CDN in the head tag and declare Vue object bellow body tag with<script></script> tag.

for more about CDN visit here

3. NPM

NPM (Node Package Manager) is used to install packages. You can use it to install Vue within either a new or existing project.

You will need to ensure you have node.js installed on your machine along with access to NPM, to download and install node.js for Windows/Linux/Mac click here

To check availability those two open up your console and type:

node -v
npm -v

Both of these commands should provide you with version numbers.if any problem or error occur then intall node.js properly and try again

In order to save our project dependencies based on what we install with NPM, we need to create a package.json file.


npm init -y

Next, we will use npm to install Vue:

npm install vue --save

A folder will be created named node_modules in the directory where you run this npm init -y command

At this point, you could create an HTML file with the same exact contents as the locally setup example above, except change the <script src to node_modules/vue/dist/vue.js, and it will work just the same.

<script src="node_modules/vue/dist/vue.js">

4. Vue with the Vue CLI

after a successful install of node.js, you can access npm to install vue-cli.

npm install -g @vue/cli

After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

You can check you have the right version with this command:

vue --version

then you have to go to the project directory and run this command:

vue init webpack-simple vue-cli

here webpack-simple is the name of the template that is provided by vue official and vue-cli is the name of the project folder, you can choose your folder name on your own.

Here is the link for official available template or you can use the command to find out the official template list, to find out just run:

vue list

then some information should be needed like project name/ description etc, you can use default or you have an option to modify these things.

Then execute some command to run you Vue project:

Enter the vue-cli folder or your own chosen name folder then install npm to pull down all the dependencies for development and then start a development server for use and it will keep running, so keep this process running and will automatically recompile everything and reload our server automatically whenever we change a file.

cd vue-cli
npm install
npm run dev