Vue JS Tutorial

Vue JS Tutorial

Introduction

Vue.js 2.* is a brand new, light weight JavaScript Framework whose popularity is increasing day by day due to its Approachability and Versatility. The Vue.js GitHub page describes it as a library for building interactive web interfaces.

It provides data-reactive components with a simple and flexible API. The framework is laid down for fast pick up and integrates very well with other libraries/databases. Vue provides a simple but efficient way of making 2-way data binding between HTML and model in real time.

By the time that you are done with this tutorial, you would have developed the following simple hello world application.

VueJS

Topics to be covered

In this tutorial, we are going to cover the following topics.

  • Pre-requisites for learning Vue.JS
  • Installation (Hello World)
    • CDN
    • Vue-cli
  • Vue JS Developer Tools

Pre-requisites for learning Vue.JS

For you to successfully complete this tutorial, you must know / have the following

  • Basic understanding of HTML/CSS.
  • Basic understanding of JavaScript.
  • A text editor i.e. Sublime, Brackets etc. for writing code
  • Web server, this is optional but highly recommended. Vue.JS works on the frontend and chances are, you will need something like PHP, Ruby On Rails or ASP on the backend. We will use PHP for these tutorial series.
  • Modern web browser that supports HTML 5 and has JavaScript enabled.
  • Node.js this is optional but highly recommended. Vue has a command line interface CLI that makes development easier. Node.JS is a prerequisite for working vue-cli.
  • Git this too is optional but highly recommended. It’s a prerequisite for vue-cli.

Installation

CDN

In order to get started we need to install Vue.js and easiest is to include a script tag in the head of your html or place it before the closing body tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.common.js"></script>

Let’s create a simple Vue JS Hello World application

Create an HTML file index.html

Add the following code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>VueJS Hello World</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>

HERE,

  • <div id="app">…</div> we create a div element with id app
  • {{ message }} uses Vue JS to display the value of the variable message
  • var app = new Vue({…}); creates a JavaScript variable app and initializes it to a new Vue object. The constructor for Vue takes in the arguments
    • el: '#app', binds the element with the id app to the vue variable app.
    • data: {message: 'Hello Vue!'} creates a variable message and assigns the value of Hello Vue!

Open the file index.html in your web browser. You should be able to see the output

Hello Vue!

Vue CLI

For node developers, a CLI is available to quick start your big projects or single page applications.

npm install --global vue-cli

HERE,

Vue CLI commands

Let’s now look at some of the most commonly used commands

vue –V, --version

displays the version number

vue – H, --help

Displays the help menu

vue list

displays all available templates for creating new projects.

vue init [template] [project-directory]

creates a new project based on [template] into a directory [project-directory]

For example, vue init webpack-simple wps creates a new Vue project based on webpack-simple template into a directory wps

Let’s now create a new project using vue-cli. For simplicity’s sake, we will use the simple template.

Run the following command

vue init simple simp

The init wizard will ask you the app name and email address. If you have git installed and configured, then it will use your email address as shown in the image below

Vue CLI

Open the index.html that the wizard created for you.

It should be similar to the following

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
        <h1>{{ greeting }}</h1>
        <ul>
            <li>
            To learn more about Vue, visit
            <a :href="docsURL" target="_blank">
            {{ humanizeURL(docsURL) }}
            </a>
            </li>
            <li>
            For live help with simple questions, check out
            <a :href="gitterURL" target="_blank">
            the Gitter chat
            </a>
            </li>
            <li>
            For more complex questions, post to
            <a :href="forumURL" target="_blank">
            the forum
            </a>
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                greeting: 'Welcome to your Vue.js app!',
                docsURL: 'http://vuejs.org/guide/',
                gitterURL: 'https://gitter.im/vuejs/vue',
                forumURL: 'http://forum.vuejs.org/'
            },
            methods: {
                humanizeURL: function (url) {
                    return url
                    .replace(/^https?:\/\//, '')
                    .replace(/\/$/, '')
                }
            }
        })
    </script>
</body>
</html>

HERE,

  • <script src="https://unpkg.com/vue/dist/vue.js"></script> loads the vue.js JavaScript file
  • <h1>{{ greeting }}</h1> outputs the contents of greeting variable
  • <a :href="docsURL" target="_blank"> creates an anchor using the value of docsURL variable.
  • new Vue({…}) instantiates the Vue object, binds the element with the id app, defines variables and a method humanizeURL that accepts a URL argument.

Open the index page

You should be able to get the following

Vue JS Example

Vue JS Developer Tools

Developer tools make it easier to develop Vue JS applications. There are two categories of tools. Text Editor / IDE tools and those that you run from the web browser.

Sublime Text Syntax Highlighting

Sublime text is one of my favourite text editors. Let’s look at the image below with code for VueJS

VueJS Sublime Text

As you can see from the above image, HTML tags i.e. div, img, h1 etc all have a light bluish color that helps identify them as separate from normal text i.e. paragraph text. The variable greeting has not been highlighted.

Syntax highlighting helps set the keywords, variables etc apart from the static content.

This section assumes you have installed sublime text 3+ and package control

Open the command palette using ctrl + shift + p

Select install Package Control: Install Package

Type Vue

You will get results similar to the following

VueJS Sublime Text

For now, we are only interested in Vue Syntax Highlight. Click on it

After the installation is completed, select Vue Component at the bottom right corner of sublime

Vue JS components should be highlight to something similar to what we have below

VueJS Sublime Text

Variables i.e. greeting, docsURL etc. have been highlighted for us.

Similar tools exist for other cool text editors i.e. Brackets, Visual Studio Code etc.

In my experience, working with these developer tools has insanely increased my productivity when working with Vue

Web Browser Runtime Tools

One of the things that I love about Visual Studio is the debugging processes. Am able to set break points, check variables values etc. during runtime. A similar experience can be achieved with Vue JS during runtime.

I am working with Google chrome and Vue has excellent tools that make the development experience sublime.

The easiest way to add the extension to google chrome, is to google vuejs dev tools then click on the result that points you to the web store

Add the extension

You should be able to see the logo for Vue in chrome as shown in the image below

Vue.js Devtools

We have successfully added the developer tool but it is inactive. This is because we are using file:/// and not http protocol. The cool thing to do is use http but we have the alternative is allowing vuejs devtools to detect vuejs even on files.

Open manage extensions in Google chrome

Select Allow access to file URLs as shown in the image below

Chrome Vue JS Devtools File URLs

Getting back to our simp example, we should be able to see the Vue dev tools active. If it is npot active, refresh the page

Press F12 on the keyboard

You should be able to see Vue added to the developer tools as shown below

Vues JS Devtools

As you can see from the above image, the devtools will show you the components that you have, variables and provides you with an interactive tool for manipulating data and running other commands

Run the following command

$vm0.greeting = "Welcome to Kode Blog"

HERE,

  • $vm0 is the name that has been assigned to the root component. $vm0.greeting gives us access to the variable greeting and we set its value to "Welcome to Kode Blog".

Press enter to execute the code

The text on the page automatically changes from Welcome to your Vue.js app! To Welcome to Kode Blog.

Such is the simplicity and re-activeness of Vue.js apps.

Summary

In this tutorial, we looked at the what Vue.js is, how to get started and some of the developer tools that make the development of Vue.js apps a blissful and beautiful thing.

What’s next?

The next tutorial will look at directives in Vue.js with practical real world examples.

Kode Blog Tutorials is dedicated to bring you update to date, high quality free tutorials. You can support us by using the social media buttons to like and share the tutorial and subscribing to our newsletter. Please use the comments section below to give us feedback.

You can sign up for a free account on our site and you will be able to keep track of your progress as you go through the tutorial series.

Our Curriculum

This tutorial introduces you to directives in Vue JS and gives you real wolrd practical examples that use directives...readmore

This tutorial introduces you to vue components and shows you using real world practical examples how to use them...readmore

Related Tutorials