Now that we have created our first component, let’s talk a bit about global and local components. A global component is a component that can be used anywhere in an application, including within other components. On the other hand, a local component is a component that is not registered globally, and can therefore only be used on components where it is registered. You will see this in action in a moment.

We are going to be using the example from one of the previous posts where we created our first component.

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

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>
	`
});

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

This component is actually a global component, because we registered it with the component method on the global Vue object. This means that we can use it anywhere we please. But what if we didn’t want that, but instead wanted it to be a local component? Let’s see that now, and start with storing the component object in a variable.

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

Then within the Vue instance, we can add a components property with the components that we want to register locally. This property should be an object and contain key-value pairs of tag names and configuration objects.

new Vue({
	el: '#app',
	components: {
		'contact-us': contactUs
	}
});

Notice that in this example, I have added the components property to a Vue instance, but I could just as well have added it to another component.

If you were to run the code, you would see the component working. But just to prove that the component is indeed local and not globally available, I will add another Vue instance and change the selector of the existing one.

new Vue({
	el: '#app1',
	components: {
		'contact-us': contactUs
	}
});

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

And then I will update the template to reflect these changes.

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

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

Now we only see the contact component being rendered once, even though we used the tag twice within the template.

It shows up for the first Vue instance, because we have registered it as a local component there, but the second Vue instance doesn’t know how to deal with the tag. Taking a look at the browser’s console, we will also see that Vue has issued a warning saying that we haven’t registered the component.

So to register global components, use the Vue.component method, and for local components, you should use the components property within Vue instances or other components.