Getting started with vue js

Getting started with Vue js – installation, overview and first app!

If you are reading this article, you probably already know that Vue js is one of the hot buzzwords in the development world nowadays. This framework is here for a while and it is getting more and more momentum. More and more developers are getting started with Vue js.

Even though the framework is often falsely seen as a new (it was started by only a one person in 2013, a former Google employee Evan You), it is as serious framework that can be compared to React or Angular. Initial creator of framework had worked with Angular back at Google, and he started the Vue.js with an idea to make a lightweight framework that was as good as Angular. As he had a lot of experience with Angular, he knew the cons and pros of that framework and while creating Vue.js it let him to concentrate on the things he liked about Angular.

Did he succeeded to make a framework that is as good as Angular? Ask a few front-end developers if you want to start a fight 🙂

Nowadays there are alot of javascript frameworks that are widely used for creating interactive UIs and there are even full-stack JavaScript frameworks (Meteor JS). In the context of the JavaScript frameworks. Vue js can be compared to Angular and React as all the three frameworks are popular and widely used by the community. However, all of them are used and there is no “the best” framework.

I hope this article will be useful for anyone. I am sure that anyone, regardless the technical background, will understand the basics of Vue.js at the end of this article. If that’s your first steps with Vue js, you will get to know what is the Vue and you will get the basic knowledge to start your own project.

There are some preconditions before starting to learn Vue:

  • Basic knowledge of HTML, CSS, JavaScript, and what is DOM
  • Understanding of what NPM (node package manager) is
  • Even though you don’t need to fully understand MVC model, it is useful to know what is view layer in this model

I will be trying to explain these things as much as possible, however if you are new to this, it might be difficult to understand some of the aspects.

At the end of this Vue js tutorial, you will know how to build a basic application with the framework. Even it’s will be just a basic knowledge, it will be a great start of a journey to the mastery of Vue! Purpose of this article is to provide you an understading of what the heck Vue is, overview some of the mechanics and let you decide if framework is for you.

Now it's the best time to be getting started with Vue js

As Vue js is not a new framework and it earned its name already, now it is the best time to be getting started with Vue js!

What is the Vue.js?

So, what is the Vue.js? The simple answer is this – it’s a progressive JavaScript framework for building user interfaces and SPA (single-page applications). It is a framework that helps UI to be fabulous and interactive.

Vue can be used to create native mobile applications. So that means that one framework could be used for creating platform specific versions – web, Android or iOS.

Why you should learn Vue.js ?

There are a lot of reasons why you should learn Vue.js. However, I am not going to go into details of what advantages it has over other frameworks.

Let’s talk about Vue as a technology that does make your life easier. There are legit reasons why you should learn Vue. Let’s cover it (without getting into the game of frameworks comparison. Take this list as a reason why you should choose Vue and not why you shouldn’t choose other frameworks.):

  • You can use it both for your personal projects and for big and complex enterprise systems. Vue js is a progressive web framework. And that it is progressive means that it can be used SPA project just like for a big and complex projects.
  • It can be easily integrated to the other projects. No matter what technology you use for your backend, integrating Vue as a view layer may not be the problem at all. Even that Vue is frequently used with Laravel, it can be used with any framework such as Django, Flask, ExpressJS, Ruby on Rails or any other.
  • One framework for mobile and web applications. Because you can use Vue.js for a development of mobile applications, it makes the framework an universal tool. You can create different versions of your project for different platforms. When you’ve mastered one framework, you can reuse the knowledge.Moreover, Vue.js can be used to develop progressive web applications. If the native means that the app is standalone application for a specific OS, PWA (progressive web application) means that the same version is suitable for both, mobile and web. It is a hybrid between native and web application. Even thought PWA lacks some functionality for mobile (can’t send notifications, access device hardware), but it is often seen as a future of mobile apps.

Simplest ways of how to use Vue and basics of the framework

There are different approaches of how to run Vue.js project. The best way to be getting started with Vue js for someone who is new or doesn’t want to invest time for installing additional tools, is to use Codepen or a just plain a HTML document. In a HTML document you can add a script element that points to external location of Vue.

Also, Vue provides a CLI (command line interface) that makes the creation of a new project simple. We will cover it later, but for now, it is a better idea to start from ground and move forward. Let’s look how to create Vue js project without CLI.

Directly including Vue to the HTML document

The fastest way to be getting started with Vue js is to include script inside the body element of your HTML document. You don’t even need to have the Vue.js locally on your machine, you can point to the Vue that is hosted by official website. It’s a simplest way but it has its cost – performance.

When you open the HTML page, script will be loaded to the page. Because it is being loaded from external source, it increases the loading time. However, if you are just getting started with Vue js, and want to play around, performance is not a headache in your case (unless you are a performance police).

There is another way that eliminates the performance problem – you can download Vue, and save it in your project folder. After that all you need to do is to put the script element inside the <body> </body> (at the end of it) or <head></head> in your HTML document.

Regardless of the method you choose, the approach is the same – you need to include Vue to your HTML (or other format) file. If you downloaded JavaScript file and saved it in your project folder, the simple <script src=”vue.js”></script> will make it work. Here is the script you need to include if you want to use the Vue from original source:

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

Great, so we have a simple HTML document, and we are pointing to the Vue resource. Nothing too fancy.

Well I assume you had it created already, as where you were including the script element?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
  </body>
</html>

Fast solution for building a simple Vue app – Codepen

If you don’t like the idea of installing the environment on your computer, you can use Codepen.

Codepen is also a good choice if you want to prototype something fast. As it provides possibility to add additional CSS and JavaScript libraries, you can develop a lot of great stuff. Codepen lets you to write HTML, CSS and JavaScript code and execute it just by simply clicking the button, moments you finished coding. How cool is that?

The reason why you should try running Vue by simply adding the script to your HTML or by using service like Codepen, is that it is simpler than using CLI. Using CLI creates additional headache if you are not familiar with Node and its package manager. However, if you are not a newbie, you can skip this section and go straight to the Vue CLI installation guide.

Ok, if you are still with me, let’s try Codepen. If it’s the first time you hear about the website, URL is https://codepen.io/.

If you don’t have a account yet, create one or use your Twitter, GitHub or Facebook profile to login. After then, create a new pen and go to the settings. There, on the JavaScript tab you can add Vue as an external script. Just simple enter “Vue” to the field called “Search CDNjs” and you will find it.

You can add Vue to Codepen

Great! Now we will be able to use Vue.

Using virtual DOM and Vue.js declarative rendering for creating a basic Vue app

Now, when we created a basic HTML document and have Vue included in it, we can start building our first app. Let’s start by seeing how declarative rendering works and what is virtual DOM.

One of the many good Vue.js features is that it has virtual DOM. It let’s to render data to DOM and manipulate HTML in a computationally inexpensive way.

DOM is a structure of your HTML document

What you are seeing here, is a DOM. If you are not familiar with DOM (document object model) concept, in is basically structure of your HTML document. Imagine it as a tree of your HTML elements. If you wanted to manipulate DOM directly with JavaScript, it would be a very resources demanding task, as the browser has to find the node you want to change.

Ok, but what is the virtual DOM then?

Virtual DOM is basically is just a JavaScript object. Vue instance creates a virtual DOM and lets to manipulate with the real DOM objects. When you want to update the real DOM, you don’t need to iterate the whole elements because you have binded specific element in your virtual DOM to the real DOM. It might sounds tricky at first, but as we will start using Vue you will see that it is simple. If you want to learn more about virtual DOM, here is a great article about Vue.js rendering with virtual DOM. However, just keep reading this article and with the next example I assure you that it will become much clearer.

Anyway, back to Vue. Let’s see how declarative rendering works in practice. First we need to create a new Vue instance. To do that, create a new file and save with as a .vue file (let’s name it App – App.vue):

var app = new Vue({
  el: '#app',
  data: {
    message: 'Cats and dogs!'
  }
})

We had created Vue instance in a simple JavaScript way, there is nothing special. We declared a variable by the name app and assigned new Vue instance to it. Here is what is happening inside the brackets (we pass options to the instance):

  • el – that is how we set a name for the element. We will be setting the name for the element we want to manipulate with in the real DOM. That’s why we should choose the name that specific element we want to manipulate with, has as a ID or class. It can be used vice versa – we could create Vue instance with an ID or class name in mind and then set it in the real DOM.
  • data – the name describes itself. You can set a data here by declaring a name and then assigning data to it. In our case we declared name message and every time we wanted to access the data that we declared in our Vue instance, we will be using name message.

As we created the App.vue file – a file where our Vue instance is declared, we need to include it to the main file of the project. It can be done by simply inserting it with a script element <script src=”location/App.vue”></script>

Note: because our App.vue file manipulates with the content of a page, it should be inserted at the end of the body element (and not inside the head element). If you inserted script element inside the head, our message will not be displayed, we will rather get {{message}} when launching our HTML file.

Accessing the data in HTML is pretty simple – you need to put the name inside the double curly brackets {{ }}. Let’s edit our HTML file to display the data we set to a message:

As you see in the example above, there is a <script> included in the body. Source locates where the .vue file that we created is.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id='app'>
      <h1>{{message}}</h1>
    </div>
    <script src="App.vue"></script>
  </body>
</html>

As you see, the h1 element is inside the div. And the div has the id set that we are using in our vue instance. We could added the id to the h1 element at it would be completely ok, but in that case we weren’t able to use attribute binding.

Making our application more dynamic with attribute binding

Nothing impressive so far? Time to start building interesting things. Lets look what is the attribute binding a it will make our project look more alive.

For example, we want to add an image above the heading in our application. The most straightforward way is to include HTML element image and set the path of an image. However, we weren’t be able to manipulate with it easily, so for specifying the image location it is wiser to use Vue.

Here is the same example code that was used previously just with some Bootstrap added, image element and a few buttons.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>
    <div id='app' class='text-center'>
      <h1 class='row'>{{message}}</h1>
      <div class="row">
        <button type="submit" class="btn btn-primary">Cats</button>
        <button type="submit" class="btn btn-success">Friendship</button>
        <button type="submit" class="btn btn-primary">Dogs</button>
      </div>
      <img v-bind:src="image">
    </div>
    <script src="App.vue"></script>
  </body>
</html>

You see that v-bind:src ? That’s called attribute binding. We bound to a image element. The word friendship is a name of element in our Vue instance. Here is how Vue.app file looks like right now:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Cats or dogs?',
    friendship: 'https://images.unsplash.com/photo-1450778869180-41d0601e046e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1450&q=80',
    dogs: 'https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    cats: 'https://images.unsplash.com/photo-1538128835124-7805d3fd3f43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
  }
})

For now we have 3 links of different images. Image that is named friendship is being displayed after the page is load, but we want buttons change the image to the others after we click on the button. We want to display image of cat when button Cats is clicked and dog when the button Dogs is clicked.

Vue has event listeners that can be added to a element. We want to change an image when we click on the button, so we need to bind button to do something:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div id='app' class='text-center'>
      <h1 class='row'>{{message}}</h1>
      <div class="row">
        <button v-on:click="image=cats" type="submit" class="btn btn-primary">Cats</button>
        <button v-on:click="image=friendship" type="submit" class="btn btn-success">Friendship</button>
        <button v-on:click="image=dogs" type="submit" class="btn btn-primary">Dogs</button>
      </div>
      <img v-bind:src="image">
    </div>
    <script src="App.vue"></script>
  </body>
</html>

Here we added v-on, a directive that listens to DOM events and in our case it listens for button clicks. When we click the button, it changes the value of image to a different one that is set in our App.vue file:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Cats or dogs?',
    image: 'https://images.unsplash.com/photo-1458419948946-19fb2cc296af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    friendship: 'https://images.unsplash.com/photo-1450778869180-41d0601e046e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1450&q=80',
    dogs: 'https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
    cats: 'https://images.unsplash.com/photo-1538128835124-7805d3fd3f43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
  }
})

If we run the page, we could see that image that is set to a image is called, but when we click on one of our buttons, the value of image changes to the predefined one. Here is how everything should look like:

See the Pen wvwJBKq by Giedrius (@Giedrius888) on CodePen.0

Might not be the best example in the world, but it explains how attribute binding pretty well.

Installing Vue.js with CLI

We had covered the easiest ways of how to install Vue, but there is a one more that might be tricky for a newbies. However, it might be the easiest method if you are experienced enough. Vue CLI provides a lot of useful tooling for Vue.js development, one of the tools lets scaffold a project with ease. Vue CLI is a handy tool for developmentl as it lets you to test your application locally by the mater of a executed command.

Let’s look of how to install Vue.js with CLI.

What you will need to have in order to install Vue with CLI

Installing Vue.js is pretty straightforward for every operating system, It doesn’t differ that much – you will need to have Node js installed on your machine. No matter what OS you are using – be it Windows, Linux or macOS, there are these common things that are necessary for Vue.js to run:

  • Node JS
  • NPM (node package manager)
  • Vue CLI (command line interface)

The reason why Node js is necessary is that without it you can’t install NPM, and without NPM you can’t install Vue CLI :). NPM, as its name already says, is a Node js package manager at it let’s to download packages (in your case CLI).

Even though you will want to use any IDE (integrated development environment) such as WebStorm (which is great for programming in Javascript, by the way), you will need to have Node installed on your machine. IDE does not install it for you. 

Installing Node js and NPM on Windows and macOS

If you are on Windows or macOS, you can download Node.js and npm from the official website: https://nodejs.org/en/download/ 

Even through it is possible to download Node from their official website and install it manually, for the macOS, alternative way to install Node is by using brew. Assuming that you have brew on your computer, you need to execute this:

brew install node

Node js and NPM for Linux

Le’ts look how to install Node and NPM on Linux. Even thought process is a little more “mechanical”, but it is fun. As usual, let’s start by updating packages list and upgrading your system:

sudo apt-get update && sudo apt-get upgrade

Now, as I mentioned before, you will need Node.js in order to run Vue. If you don’t have it yet, you can install it with this simple command:

sudo apt install nodejs

This is how you check if the installation was successful:

node –version

You will also need npm:

sudo apt install npm

After the successful installation you can check the version of the npm by executing:

npm -v

Now let’s get to the business – in order to be able to generate Vue JS app on your server or computer, you will need to have Vue CLI.  And this is how you can get it:

npm install -g @vue/cli

-g parameter means that the installation is global – accessible by every user on the machine.

Now, when we have the command line interface, we can create a project:

vue create projectname

Note: you can only use one word as a project name. You also can’t use capital letters. If you want to create a name that has two words in it, use kebab-case (project-name). It is a common naming convention.

Now you will get asked to make a few decisions like selecting a preset:

You will be asked to select a preset

For now, don’t worry too much about it. Just press enter and wait for the CLI to end installing plugins.

If the installation was successful, you should have a project folder created in your current directory. We are one step ahead of launching our app!

After the creation has finished, you should get the instructions how to run your app. Usually the best and the simplest way to launch, is to use npm run serve command. 

Use npm run serve to start Vue js project

So now when we executed cd vue test && npm run serve in the terminal, we should get our app running. You can access it by the provided IP addresses.

Now you can access your Vue app by the provided IP

If you visited localhost, you should see this default Vue page:

Default Vue page

Congratulations you just installed your first Vue app!

Final thoughts

As now you have tried it, you should decide if you want to keep learning Vue further. Because we had covered only basics in this article, it is just an tip of an iceberg. I believe that learning this framework will be a great decision because possibilities with Vue js are endless.

Leave a Comment

Your email address will not be published. Required fields are marked *