Introduction to Components

Now it’s time to look at components, which are one of the most powerful features of Vue.js. Components let you encapsulate reusable code that is self-contained. We will be using components extensively throughout the rest of the series, so this is an important concept. For the first couple of posts, we will still be working within JSFiddle, but soon we are going to switch to the setup that we saw in the previous posts.

But wait a minute, couldn’t we just use a Vue instance with a class selector to place it multiple times on a page? No, actually you can’t. Consider the following example.

<div class="test"></div>
<div class="test"></div>

new Vue({
	el: '.test',
	template: '<h1>{{ message }}</h1>',
	data: {
		message: 'Hello World!'
	}
});

If you were to run the above code, the message would only show up once, since the Vue instance is bound to the first element that matches the CSS selector.

Instead of that, let’s create our first component, which will be a very simple “contact us” widget.

Vue.component('contact-us', { });

The object that we pass to the component method is almost identical to what we have previously passed to Vue instances. One difference, though, is that the data property must be a function returning a data object. We’ll take a look at why this is the case in the next post, so for now, let’s just add the function.

Vue.component('contact-us', {
	data: function() {
		return {
			email: '[email protected]'
		};
	}
});

As for the template, I will add an inline template within the component, and in a later post, we will move to working with single file components.

Vue.component('contact-us', {
	data: function() {
		return {
			email: '[email protected]'
		};
	},
	template: `
		<div>
			<h1>Contact Us</h1>
			<p>Please send an e-mail to: {{ email }}</p>
		</div>
	`
});

Note that I wrapped the important parts of the template within a div element. This div probably looks redundant, but actually it’s required by Vue.js. This is because each Vue component must have exactly one root element – otherwise it won’t work, and we would see an error in the console.

Now we need a root Vue instance which will control our template, so let’s create one as we have done so many times before.

new Vue({
	el: '#app',
});

So this Vue instance will control the app element, and since we have already registered a component, we can use this component within this element. We do this by using the tag name that we specified.

<div id="app">
	<contact-us></contact-us>
</div>

If we run the code, we see our component’s template being rendered.

The cool thing is, that we can now use this components as many times as we want, so let’s just try to add it to the template one more time.

<div id="app">
	<contact-us></contact-us>
	<contact-us></contact-us>
</div>

With that, we have successfully created our first Vue component! You can find a the full code right here. Let’s now see exactly why we need to use a function for the data property instead of an object as we have done so far.