Getting Started With Vue.js: Components
By: Valerie Foster
Tags: Coding, JavaScript, Vuejs, Programming, Web Development

In my last few blog posts I have talked about some of the ways you can use Vue.js to keep track of dynamic data on a webpage, and how Vue gives you something called directives to change the way that data appears on the page. But, as I mentioned last time, you need a way to use these things on a big scale to make a good website. The way to do this is by using Vue Components. In this blog post I’m going to give a very basic overview of some of the things these Components can do and how they can be used.

Components are essentially reusable Vue instances that are given a name. Because they are instances, they accept the same options as new Vue , such as data and computed , along with a name. The basic format looks like this:

Vue.component('component-name', {

data: function () {

return {

// some data

}

},

template: `<div>

<!-- some html-->

</div>`

})

To break this down, the first parameter, 'component-name' , is the name you give it to refer to the component when you use it in your HTML. You must give it a name, and the object you pass as the second variable should probably have a template with some HTML, so that your component will appear on the page when you use it. It is also best practice to use kebab-case for the name, with all lower case and hyphens, because this follows the rules for custom HTML tag names.

The data part is the data you need for the component, and it should always be a function that returns an object with the data. This is so that each individual instance of the component will have it’s own copy of the data. If it just returned a data object without the function, every instance of the component would be affected by a change in data to any one of them. The template part of the component is the HTML that you want your component to have. Note here that the template is wrapped in back quote marks, instead of single quotes. This is because the string for the template is on several lines, so you either need to wrap it in back quotes, or have backslashes at the end of each line.

Here is an example of a component that will have a button that will increase a counter, showing how to use it in your page:

// in index.js

Vue.component('counter-component', {

data: function () {

return {

count: 0

}

},

template: `<div>

<button v-on:click="count++">Click me!</button>

<p>You've clicked the button {{ count }} times</p>

</div>`

}) new Vue({

el: '#component-example'

}) // in index.html

<div id='component-example'>

<counter-component></counter-component>

</div>

From this example you can see that you can use a component in your webpage by using it’s name as if it were an HTML tag. And you can use each component as many times as you want. There are a few other things to note here. First, you need to have a Vue instance attached to the HTML using el where you want to use the component. Otherwise, in this case, the div would be empty because it doesn’t know of an element called counter-component . The second thing is, you need to have your template wrapped in a single HTML element. If I took away the div from the template in my example, it would cause an error and wouldn’t work.

Vue components are mainly used for when you write a piece of HTML that you want to reuse. For example, the profile of every user of a site should have similar formatting, so we want to reuse some HTML that will be the same except for the data that differs from user to user, like a name or email. But to do this, we need a way to give each use of the component a different set of information. This is achieved by using something called props. Props are one of the options you can give to a Vue component, like so:

Vue.component('profile', {

props: ['name'],

template: '<h3>{{ name }}</h3>'

})

Then, to pass it the name prop when we use it, we can do this:

<profile name="Jane Doe"></profile>

<profile name="John Smith"></profile>

<profile name="Jesse Baker"></profile>

But hard coding names in isn’t especially useful if we want our page to be dynamic, so you would usually want to loop over a list you have in the data of your instance. Thankfully, Vue’s v-for works with components, so you could use this profile component like this:

// in index.js

new Vue({

el: '#people-list',

data: {

people: [

{ id: 1, name: 'Jane Do'},

{ id: 2, name: 'John Smith'},

{ id: 3, name: 'Jesse Baker'}

]

}

}) // in index.html

<div id="people-list">

<profile

v-for="person in people"

v-bind:key="person.id"

v-bind:name="person.name"

></profile>

</div>

As you can see from this example, you can use v-bind to pass props that are dynamic, so this example will look exactly the same on a webpage as the previous one where I passed the name s in manually. Another thing to consider is that as my profile component grows, it will likely need more props. But, using v-bind over and over for a large number of props would get tedious, so another way to write this profile component would be like this:

// in index.js

Vue.component('profile', {

props: ['person'],

template: `<div>

<h3>{{ person.name }}</h3>

<img v-bind:src='person.img_url'></p>

<p>{{ person.email }}</p>

</div>`

}) // in index.html

<div id="people-list">

<profile

v-for="person in people"

v-bind:key="person.id"

v-bind:person="person"

></profile>

</div>

The last thing about Vue components that I’ll talk about is slots. You may have noticed that in the examples I’ve used, there is never anything between the opening and closing tags of the components in the HTML. That’s because, if you try to put anything between the opening and closing tags of a component, it will not show up on the page. But sometimes you may want to put something in between them. This is where slots come in. They look like this:

// in index.js

Vue.component('navigation-link', {

props: ['url'],

template: `

<a v-bind:href="url">

<slot></slot>

</a>

`

}) // in index.html

<div id="profile-nav">

<navigation-link url="/profile">

Your Profile

</navigation-link>

</div>

From the part in bold, you can see that I added the slot element, another thing that Vue gives you. Now anything you write in between the navigation-link tags will show up where you put the slot element in the component.

With this, I think I have given a good basic overview on Vue Components. I’ve shown some of the ways they can be used and some of the things they can do. But there is a lot more you can do with components, and if you’re interested, I encourage you to check out all the ways you can use them in Vue’s documentation about components. With this and all of the other posts I’ve written about Vue.js, I’ve pretty much covered all the basics that you need to get started with Vue.js.