useVueSlotNameCasing (HTML)

Language HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.6.5
• Diagnostic Category: lint/nursery/useVueSlotNameCasing
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/slot-name-casing

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueSlotNameCasing": "error"
      }
    }
  }
}

Description

Enforce a consistent casing for the names of Vue slots.

A component declares its slots with <slot name="..."> elements, and the parent fills them with v-slot:name or #name. Vue doesn’t convert slot names between camelCase and kebab-case, so the parent must spell the name exactly as the component does. Using one casing for every slot name makes the names easier to remember and to search for.

Only <slot> elements with a static name attribute are checked. Dynamic names, such as :name="slotName", are ignored.

Examples

Invalid

<template>
  <slot name="foo-bar" />
</template>

code-block.vue:2:14 lint/nursery/useVueSlotNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The slot name foo-bar isn't in camelCase.
  
    1 │ <template>
  > 2 │   <slot name="foo-bar" />
      │              ^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't convert slot names between casings, so components that fill this slot must use the exact same name. Using one casing for every slot name keeps them consistent.
  
  ℹ Rename the slot so that it is in camelCase, and update the components that fill it.
  
  ℹ 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.
  

<template>
  <slot name="foo_bar" />
</template>

code-block.vue:2:14 lint/nursery/useVueSlotNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The slot name foo_bar isn't in camelCase.
  
    1 │ <template>
  > 2 │   <slot name="foo_bar" />
      │              ^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't convert slot names between casings, so components that fill this slot must use the exact same name. Using one casing for every slot name keeps them consistent.
  
  ℹ Rename the slot so that it is in camelCase, and update the components that fill it.
  
  ℹ 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.
  

Valid

<template>
  <slot name="foo" />
  <slot name="fooBar" />
  <slot :name="slotName" />
</template>

Options

casing

Default: "camelCase"

The casing that slot names must follow:

• "camelCase": slot names must be in camelCase, such as fooBar.
• "kebab-case": slot names must be in kebab-case, such as foo-bar.
• "singleword": slot names must only contain lowercase letters from a to z, such as foo.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueSlotNameCasing": {
          "level": "on",
          "options": {
            "casing": "kebab-case"
          }
        }
      }
    }
  }
}

Invalid

<template>
  <slot name="fooBar" />
</template>

code-block.vue:2:14 lint/nursery/useVueSlotNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The slot name fooBar isn't in kebab-case.
  
    1 │ <template>
  > 2 │   <slot name="fooBar" />
      │              ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't convert slot names between casings, so components that fill this slot must use the exact same name. Using one casing for every slot name keeps them consistent.
  
  ℹ Rename the slot so that it is in kebab-case, and update the components that fill it.
  
  ℹ 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.
  

Valid

<template>
  <slot name="foo" />
  <slot name="foo-bar" />
</template>

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useVueSlotNameCasing": {
          "level": "on",
          "options": {
            "casing": "singleword"
          }
        }
      }
    }
  }
}

Invalid

<template>
  <slot name="fooBar" />
</template>

code-block.vue:2:14 lint/nursery/useVueSlotNameCasing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The slot name fooBar isn't a single word made only of the lowercase letters a to z.
  
    1 │ <template>
  > 2 │   <slot name="fooBar" />
      │              ^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't convert slot names between casings, so components that fill this slot must use the exact same name. Using one casing for every slot name keeps them consistent.
  
  ℹ Rename the slot so that it is a single word made only of the lowercase letters a to z, and update the components that fill it.
  
  ℹ 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.
  

Valid

<template>
  <slot name="foo" />
</template>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground