Are my Component Names Too Long? Vue.js Component Naming Best Practices

When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components.

What is too long?

Jane Manchun Wong from Facebook has gathered .

Her results are that the mean length of a component name is 27 characters:

ImA27CharacterComponentName

. And the longest component name counts 66 characters. She also gives two examples for some very long component names.

On the one hand, we should always strive to keep our code short and concise. On the other hand, we read more code than we write.

Therefore, it is critical to quickly understand what a component does rather than to save a few milliseconds while writing the code.

That is why I argue that you should worry much less about your component names getting too long and instead focus on getting them right. It’s more important to stick to some general rules and best practices when choosing the names for your components.

Best practices

The official Vue.js style guide provides us with a comprehensive list of recommendations for how to name our Vue.js components. You might notice that even in the examples, some of the component names are getting quite long.

Wrapping it up

Don’t worry about your component names becoming too long! Instead, focus on coming up with descriptive names and rigorously follow the best practices I mentioned above. In the long run, it pays off.

Previously published at