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 one person in 2013, a former Google employee Evan You), it is a serious framework that can be compared to React or Angular. The initial creator of the 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 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 a lot 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 to anyone. I am sure that anyone, regardless of the technical background, will understand the basics of Vue.js at the end of this article. If that’s your first step 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 the 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 basic knowledge, it will be a great start of a journey to the mastery of Vue! The purpose of this article is to provide you an understanding of what the heck Vue is, overview some of the mechanics and let you decide if the framework is for you.
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 Vue.js?
So, what is 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 big and complex projects.
- It can be easily integrated into 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 the development of mobile applications, it makes the framework a 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 a 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 applications. Even though 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 to how to run the 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 just plain HTML document. In an HTML document, you can add a script element that points to the 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 the ground and move forward. Let’s look at how to create a 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 a 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 the official website. It’s the simplest way but it has its cost – performance.
When you open the HTML page, the script will be loaded to the page. Because it is being loaded from an 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 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 any other format) file. If you downloaded a 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 the possibility to add additional CSS and JavaScript libraries, you can develop a lot of great stuff. Codepen lets you 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 a service like Codepen is that it is simpler than using CLI. Using CLI creates additional headaches 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 an account yet, create one or use your Twitter, GitHub, or Facebook profile to log in. 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 simply enter “Vue” to the field called “Search CDNjs” and you will find it.
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 render data to DOM and manipulate HTML in a computationally inexpensive way.
What you are seeing here, is a DOM. If you are not familiar with DOM (document object model) concept, it is the basic 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 resource-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 bound a specific element in your virtual DOM to the real DOM. It might sound 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. Firstly, 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 a 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 an ID or class. It can be used vice versa – we could create a 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 the data here, by declaring a name and then assigning data to it. In our case, we declared a name message and every time we wanted to access the data that we declared in our Vue instance, we will be using a 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 add 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 an HTML element image and set the path of an image. However, we weren’t 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>
Do you see that v-bind:src? That’s called attribute binding. We bound to an image element. The word friendship is the name of an element in our Vue instance. Here is how the 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 to different images. The image that is named friendship, is being displayed after the page is load, but we want buttons to change the image to the others after we click on the button. We want to display an image of a cat when the button Cats is clicked on and a dog when the button Dogs is clicked on.
Vue has event listeners that can be added to an element. We want to change an image when we click on the button, so we need to bind the 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 the 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 an image is called, but when we click on one of our buttons, the value of the 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 one more that might be tricky for 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 development as it lets you test your application locally by the mater of an 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 that let’s downloading packages (in our 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 though it is possible to download Node from their official website and install it manually, for the macOS, an 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 though the process is a little more “mechanical”, but it is fun. As usual, let’s start by updating the 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:
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 instructions on how to run your app. Usually, the best and the simplest way to launch is to use npm run serve command.
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.
If you visited localhost, you should see this 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 the basics in this article, it is just the tip of an iceberg. I believe that learning this framework will be a great decision because possibilities with Vue js are endless.