Pular para o conteúdo
Biome
Docs Enterprise Playground
Blog

useVueMultiWordComponentNames

Este conteúdo não está disponível em sua língua ainda.

Summary

Section titled “Summary”

How to configure

Section titled “How to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMultiWordComponentNames": "error"
      }
    }
  }
}

Description

Section titled “Description”

Enforce multi-word component names in Vue components.

Using a single-word component name (e.g. App, Header) can:

  • Conflict with native/custom HTML elements (present or future)
  • Reduce clarity/expressiveness

This rule requires component names to be “multi-word”.

A name is considered multi-word when:

  • Kebab-case: contains at least one hyphen (my-component)
  • PascalCase / CamelCase: contains at least two capital letters (MyComponent); single-cap names like App or Foo are rejected

Component names are extracted from the name property in Options API components, or inferred from the file name if not explicitly set.

Examples

Section titled “Examples”

Invalid

Section titled “Invalid”
<script>
export default {
  name: "Foo"
};
</script>
code-block.vue:2:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This Component’s name “Foo” only contains one word.
  
    1 │ export default {
  > 2 │   name: “Foo”
      │         ^^^^^
    3 │ };
    4 │ 
  
  ℹ Single-word component names can collide with HTML elements and are less descriptive.
  
  ℹ Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).
  
import { defineComponent } from "vue";
export default defineComponent({
  name: "Header"
});
code-block.js:3:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This Component’s name “Header” only contains one word.
  
    1 │ import { defineComponent } from “vue”;
    2 │ export default defineComponent({
  > 3 │   name: “Header”
      │         ^^^^^^^^
    4 │ });
    5 │ 
  
  ℹ Single-word component names can collide with HTML elements and are less descriptive.
  
  ℹ Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).
  
import { createApp } from "vue";
createApp({
  name: "Widget"
}).mount("#app");
code-block.js:3:9 lint/nursery/useVueMultiWordComponentNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This Component’s name “Widget” only contains one word.
  
    1 │ import { createApp } from “vue”;
    2 │ createApp({
  > 3 │   name: “Widget”
      │         ^^^^^^^^
    4 │ }).mount(“#app”);
    5 │ 
  
  ℹ Single-word component names can collide with HTML elements and are less descriptive.
  
  ℹ Rename the component to have 2 or more words (e.g. “FooItem”, or “BarView”).

Valid

Section titled “Valid”
<script>
export default {
  name: "MyComponent"
};
</script>
export default {
  name: "my-component"
};
defineComponent({
  name: "MyComponent"
});
createApp({ name: "MyApp" }).mount("#app");

Options

Section titled “Options”

ignores

Section titled “ignores”

Additional single-word component names to ignore (case-insensitive). The rule already ignores Vue built-in components and App by default.

biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useVueMultiWordComponentNames": {
          "options": {
            "ignores": [
              "Foo"
            ]
          }
        }
      }
    }
  }
}

Valid

Section titled “Valid”
<script>
export default {
  name: "Foo"
};
</script>
Section titled “Related links”

Copyright (c) 2023-present Biome Developers and Contributors.