noVueDeprecatedSlotAttribute (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/noVueDeprecatedSlotAttribute
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Inspired from vue/no-deprecated-slot-attribute

How to configure

biome.json

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

Description

Disallow the deprecated slot attribute in Vue templates.

Vue 3 removed the slot attribute, which Vue 2 used to send content to a named slot of a component. Vue 3 treats it as a regular attribute, so the content ends up in the component’s default slot instead of the named slot.

Use the v-slot directive on a <template> element instead, for example <template v-slot:header> or its shorter form <template #header>.

The rule checks slot="...", :slot="...", and v-bind:slot="...".

Examples

Invalid

<template>
  <MyComponent>
    <template slot="header">Title</template>
  </MyComponent>
</template>

code-block.vue:3:15 lint/nursery/noVueDeprecatedSlotAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot attribute is deprecated.
  
    1 │ <template>
    2 │   <MyComponent>
  > 3 │     <template slot="header">Title</template>
      │               ^^^^^^^^^^^^^
    4 │   </MyComponent>
    5 │ </template>
  
  ℹ Vue 3 treats it as a regular attribute, so the content goes to the component's default slot instead of the named slot.
  
  ℹ Use the v-slot directive on a <template> element instead, for example <template v-slot:name> or <template #name>.
  
  ℹ 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>
  <MyComponent>
    <div slot="header">Title</div>
  </MyComponent>
</template>

code-block.vue:3:10 lint/nursery/noVueDeprecatedSlotAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot attribute is deprecated.
  
    1 │ <template>
    2 │   <MyComponent>
  > 3 │     <div slot="header">Title</div>
      │          ^^^^^^^^^^^^^
    4 │   </MyComponent>
    5 │ </template>
  
  ℹ Vue 3 treats it as a regular attribute, so the content goes to the component's default slot instead of the named slot.
  
  ℹ Use the v-slot directive on a <template> element instead, for example <template v-slot:name> or <template #name>.
  
  ℹ 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>
  <MyComponent>
    <template :slot="slotName">Title</template>
  </MyComponent>
</template>

code-block.vue:3:15 lint/nursery/noVueDeprecatedSlotAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot attribute is deprecated.
  
    1 │ <template>
    2 │   <MyComponent>
  > 3 │     <template :slot="slotName">Title</template>
      │               ^^^^^^^^^^^^^^^^
    4 │   </MyComponent>
    5 │ </template>
  
  ℹ Vue 3 treats it as a regular attribute, so the content goes to the component's default slot instead of the named slot.
  
  ℹ Use the v-slot directive on a <template> element instead, for example <template v-slot:name> or <template #name>.
  
  ℹ 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>
  <MyComponent>
    <template v-slot:header>Title</template>
  </MyComponent>
  <MyComponent>
    <template #header>Title</template>
  </MyComponent>
  <MyComponent>
    <template #[slotName]>Title</template>
  </MyComponent>
</template>

Options

ignore

Type: string[]

Default: []

Names of elements that can use the slot attribute. Case and hyphens are ignored, so my-component also matches MyComponent.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueDeprecatedSlotAttribute": {
          "level": "on",
          "options": {
            "ignore": [
              "my-component"
            ]
          }
        }
      }
    }
  }
}

Valid

<template>
  <ListComponent>
    <MyComponent slot="header">Title</MyComponent>
  </ListComponent>
</template>

Invalid

<template>
  <ListComponent>
    <OtherComponent slot="header">Title</OtherComponent>
  </ListComponent>
</template>

code-block.vue:3:21 lint/nursery/noVueDeprecatedSlotAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot attribute is deprecated.
  
    1 │ <template>
    2 │   <ListComponent>
  > 3 │     <OtherComponent slot="header">Title</OtherComponent>
      │                     ^^^^^^^^^^^^^
    4 │   </ListComponent>
    5 │ </template>
  
  ℹ Vue 3 treats it as a regular attribute, so the content goes to the component's default slot instead of the named slot.
  
  ℹ Use the v-slot directive on a <template> element instead, for example <template v-slot:name> or <template #name>.
  
  ℹ 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.
  

ignoreParents

Type: string[]

Default: []

Names of elements whose direct children can use the slot attribute. Case and hyphens are ignored, so my-web-component also matches MyWebComponent.

This is useful for web components, where slot is a standard HTML attribute that places a child into a named slot of the web component.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noVueDeprecatedSlotAttribute": {
          "level": "on",
          "options": {
            "ignoreParents": [
              "my-web-component"
            ]
          }
        }
      }
    }
  }
}

Valid

<template>
  <my-web-component>
    <span slot="header">Title</span>
  </my-web-component>
</template>

Invalid

<template>
  <OtherComponent>
    <span slot="header">Title</span>
  </OtherComponent>
</template>

code-block.vue:3:11 lint/nursery/noVueDeprecatedSlotAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The slot attribute is deprecated.
  
    1 │ <template>
    2 │   <OtherComponent>
  > 3 │     <span slot="header">Title</span>
      │           ^^^^^^^^^^^^^
    4 │   </OtherComponent>
    5 │ </template>
  
  ℹ Vue 3 treats it as a regular attribute, so the content goes to the component's default slot instead of the named slot.
  
  ℹ Use the v-slot directive on a <template> element instead, for example <template v-slot:name> or <template #name>.
  
  ℹ 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.
  

References

• Vue named slots
• Vue v-slot directive

Related links

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