Components in Vue JS

In the previous post, we saw an example of how to use templates in Vue, and now, we are going to use the same code to create a component in Vue JS. The official documentation is quite extensive and at the same time clear on how to proceed, although it is not very similar to what we have already worked on.

Components allow us to “isolate” parts of an application to concentrate exclusively on what happens inside, without worrying about anything else. These are reusable Vue instances!

The Vue instance needs an “el” element to get developed, but components need a template (although you can also make components that do not need template, but that will be discussed later).

Creating components

Just increase the options of the Vue instance with:

Vue.component(‘name’, { })

The first parameter is the name of the component, so you can use it <name></name>.

Cool!!!!!

The second parameter is an object, and will be where the logic of the component is incorporated. Although many of the properties already seen are the same as those that will be used in the components, there are some differences. The main one: data is now a function!

Components also allow information to be transferred to them, by means of props that is to an array, or an object where the keys define the properties of the model. The official documentation explains very well complex situations to, for example, force a property to have data, or to include a default data, to make it optional, ….. Everything, very well specified inside an object!

Let’s back to Login

To see the power of the components, let’s modify the previous exercise of Login, and transform it into a component.

The HTML code remains unchanged, i.e. it has no modification (except for calling a new Javascript file).

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Example templates</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
	integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/estilo.css">
</head>
 
<body>
<div id="app" v-cloak>
 
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="src/login.js"></script>
</body>
 
</html>

The code of the component is almost identical to what we had in the example of the templates, with the exception of the data property, which has changed to a function that returns an object. Before we had this code:

data: {
user: { name: null, password: null },
errors: [],
logged: false
},

and now, you have this other code:

data: function () {
return {
user: { name: null, password: null },
errors: [],
logged: false
}
}

The property template is the same, but also the computed properties and functions.

Let’s register the new component, named login:

Example templates

All that remains is to modify the initial Vue instance, which looks like this:

const app = new Vue({
el: '#app',
template: `<login></login>`
})

In template, I have included the created component that I have created: login.

Easy, isn’t it? Let’s keep on learning!

Components in Vue JS