How to name the components in VUE-JS
Published: 2024-05-08 14:13:56

_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 <transition> or <component>.
 
             ❌                         ✅

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