Component Naming Conventions

Published on May 3, 2017 by

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.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.