DEV Community

Cover image for Are my Component Names Too Long? Vue.js Component Naming Best Practices
Markus Oberlehner
Markus Oberlehner

Posted on • Originally published at markus.oberlehner.net

1 2

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. 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.

Sentry image

Make it make sense

Only the context you need to fix your broken code with Sentry.

Start debugging →

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay