useVueRegisteredComponentNameCasing (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/useVueRegisteredComponentNameCasing
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/component-options-name-casing

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueRegisteredComponentNameCasing": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce a consistent casing style for the names of components registered in the components option of Vue components.

A Vue component can make other components available to its template by listing them in its components option. The name of each entry is the name the template uses for that component. Using one naming style for all of these names makes components easier to find and to use.

The naming style also decides how the template can refer to a component. A component registered as TodoItem can be written as both <TodoItem> and <todo-item> in a template. A component registered as todo-item can only be written as <todo-item>, and a component registered as todoItem can’t be written as <TodoItem>.

Names written only with characters from writing systems without uppercase and lowercase letters, such as 漢字, follow every style. Names that contain symbols, such as _ or $, don’t follow any style.

Examples

Invalid

1
<script>
2
export default {
3
  components: {
4
    todoItem: TodoItem,
5
  },
6
};
7
</script>

code-block.vue:4:5 lint/nursery/useVueRegisteredComponentNameCasing  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name todoItem isn't in PascalCase.
  
    2 │ export default {
    3 │   components: {
  > 4 │     todoItem: TodoItem,
      │     ^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Using one naming style for all registered components makes them easier to find and to use.
  
  ℹ Rename the component to PascalCase.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to TodoItem.
  
    2 2 │   export default {
    3 3 │     components: {
    4   │ - ····todoItem:·TodoItem,
      4 │ + ····TodoItem:·TodoItem,
    5 5 │     },
    6 6 │   };

1
<script>
2
export default {
3
  components: {
4
    "todo-item": TodoItem,
5
  },
6
};
7
</script>

code-block.vue:4:5 lint/nursery/useVueRegisteredComponentNameCasing  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name todo-item isn't in PascalCase.
  
    2 │ export default {
    3 │   components: {
  > 4 │     "todo-item": TodoItem,
      │     ^^^^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Using one naming style for all registered components makes them easier to find and to use.
  
  ℹ Rename the component to PascalCase.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to TodoItem.
  
    2 2 │   export default {
    3 3 │     components: {
    4   │ - ····"todo-item":·TodoItem,
      4 │ + ····TodoItem:·TodoItem,
    5 5 │     },
    6 6 │   };

Valid

1
<script>
2
export default {
3
  components: {
4
    TodoItem,
5
    TodoList: List,
6
  },
7
};
8
</script>

Options

`casing`

Default: "PascalCase"

The casing that component names must follow: "PascalCase", "camelCase", or "kebab-case".

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueRegisteredComponentNameCasing": {
6
          "level": "on",
7
          "options": {
8
            "casing": "kebab-case"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

Invalid

1
<script>
2
export default {
3
  components: {
4
    TodoItem,
5
  },
6
};
7
</script>

code-block.vue:4:5 lint/nursery/useVueRegisteredComponentNameCasing  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The component name TodoItem isn't in kebab-case.
  
    2 │ export default {
    3 │   components: {
  > 4 │     TodoItem,
      │     ^^^^^^^^
    5 │   },
    6 │ };
  
  ℹ Using one naming style for all registered components makes them easier to find and to use.
  
  ℹ Rename the component to kebab-case.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Rename the component to todo-item.
  
    4 │ ····"todo-item":·TodoItem,
      │     +++++++++++++

Valid

1
<script>
2
export default {
3
  components: {
4
    "todo-item": TodoItem,
5
  },
6
};
7
</script>

useVueRegisteredComponentNameCasing (JavaScript)

Summary

How to configure

Description

Examples

Invalid

Valid

Options

casing

Invalid

Valid

Related links

`casing`