When registering components either locally or globally, you have a few options for how to name the tag name. In the examples from the previous posts, I have used kebab-case, which means all lowercased letters and words are separated by a dash. However, you can also use camelCase or PascalCase if you prefer.

Consider the example from the previous post.

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

var contactUs = {
	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',
	components: {
		'contact-us': contactUs
	}
});

Let’s try to change the tag name to camelCase first of all.

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

Since Vue doesn’t care about the casing, this will actually work, even though it doesn’t match the case that we have used within the template. There is one important thing to note, though. If you are using an HTML template as we are in this case, then the tags must be in kebab-case, i.e. as it currently is. This is because HTML tags are case insensitive. However, if you are using an inline template, then you can use any case that you want, because this is then handled by JavaScript.

When you register the component, you can always choose which case you prefer, though. So you could camelCase or PascalCase and refer to the tag with kebab-case within the template, or you could use the same case in both places. That’s totally up to you.

So that was just a few words about naming conventions. I recommend that you choose camelCase for your JavaScript objects, as this is a convention in JavaScript. As for the template, I recommend using kebab-case, as this is the HTML standard. If you would like to keep the tags identical both within the template and JavaScript, then you can use kebab-case in both places.