How to name the components in VUE-JS

Maryam — Wed, 08 May 2024 14:13:56 +0000

When coding, I always faced a fundamental issue on how to name classes and components to maintain a clean structure and follow specific principles in vue-js. Sometimes, I used kebab-case for component names, class names, variables, and everything else. Occasionally, I applied camel-case for all, and at times, I defined each in a different way. However, I realized this approach led to a disorganized and unreadable project structure.
Therefore, I decided to conduct research on general naming conventions to define my project structure according to specific principles and move forward.
As a result, it turned out like this.

1.Multi-word component names

Component names should be multi-word , except for root App components, and built-in components provided by Vue, such as or .

         ❌                         ✅

        Todo                     todo-item

2.Single-file component filename casing

Filenames of single-file components should either be always PascalCase or always kebab-case.
PascalCase works best with autocompletion in code editors, as it’s consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why kebab-case is also perfectly acceptable.

         ❌                         ✅            

   mycomponent.vue             MyComponent.vue
   myComponent.vue             my-component.vue

3.Base component names

Base components that apply app-specific styling and conventions should all begin with a specific prefix, such as Base, App, or V.

         ❌                       ✅

    MyButton.vue               BaseButton.vue
    VueTable.vue               AppTable.vue
    Icon.vue                   VIcon.vue

4.Single-instance component names

Components that should only ever have a single active instance should begin with the The prefix, to denote that there can be only one.
This does not mean the component is only used in a single page, but it will only be used once per page. These components never accept any props, since they are specific to your app, not their context within your app. If you find the need to add props, it’s a good indication that this is actually a reusable component that is only used once per page for now.

         ❌                       ✅

    Heading.vue              TheHeading.vue
    MySidebar.vue            TheSidebar.vue

5.Tightly coupled component names

Child components that are tightly coupled with their parent should include the parent component name as a prefix.
If a component only makes sense in the context of a single parent component, that relationship should be evident in its name. Since editors typically organize files alphabetically, this also keeps these related files next to each other.

         ❌                        ✅

    TodoList.vue              TodoList.vue
    TodoItem.vue              TodoListItem.vue
    TodoButton.vue            TodoListItemButton.vue

6.Order of words in component names

Component names should start with the highest-level (often most general) words and end with descriptive modifying words.

         ❌                         ✅    

  ClearSearchButton.vue      SearchButtonClear.vue
  TermsCheckbox.vue          SettingsCheckboxTerms.vue

7.Full-word component names

Component names should prefer full words over abbreviations.
The autocompletion in editors make the cost of writing longer names very low, while the clarity they provide is invaluable. Uncommon abbreviations, in particular, should always be avoided.

          ❌                        ✅          

    SdSettings.vue         StudentDashboardSettings.vue
    UProfOpts.vue          UserProfileOptions.vue

8.Prop name casing

Prop names should always use camelCase during declaration, but kebab-case in templates and JSX.
We’re simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.

props: { 'greeting-text': String ❌ }

props: { greetingText: String ✅ }

<WelcomeMessage greetingText="hi"/> ❌

<WelcomeMessage greeting-text="hi"/> ✅

How do you name Html classes?

1.Use lowercase and hyphens

class="MainHeader" ❌

class="main-header" ✅

2.Be descriptive and consistent

class="btn-style1” ❌

class="button-primary" ✅

3.Avoid using presentational or structural names

class="red" ❌

class="error" ✅

4.Follow the BEM methodology

class="card--title--large" ❌

class="card__title--large" ✅

I’ve decided to adopt these methods for my projects because they’ve made my project structure cleaner and my code more readable. I hope this article has been able to help you as well.
Thanks for reading. I’m looking forward to your feedback.

Best wishes.❤️
Maryam Tavana

DEV Community: Maryam

How to name the components in VUE-JS