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 data from more than 3000 components in the Facebook React codebase.

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

ImA27CharacterComponentName

CometSearchTypeaheadInternalLayoutInlineStrategyWithScrollableView
CoronavirusCommunityHelpCometRequestOfferHelpCreateDialog

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.

• Base component names
• Single instance component names
• Tightly coupled component names
• Order of words in component names
• Full-word component names

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 https://markus.oberlehner.net/blog/are-my-component-names-too-long-vuejs-component-naming-best-practices/