How to Write Shorter Component Names In Vue.js | Hacker Noon

June 5th 2020

Author profile picture

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?

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.

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.

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.

Comments

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!

read original article here