noVueUndeclaredSlots (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueUndeclaredSlots
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/require-explicit-slots

How to configure

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

Description

Disallow <slot> elements whose slot isn’t declared in the component’s types.

In a Vue component written in TypeScript, the slots the component renders can be declared with types. The types describe which slots a parent component can fill, and the data each slot passes to that content. Editors and type checkers use them to check the content parent components pass in. A slot that is rendered but not declared isn’t checked at all.

Slots are declared in one of two ways:

with defineSlots() in <script setup>;
with the slots option of the component, written as Object as SlotsType<...>.

A <slot> element without a name attribute renders the slot named default.

The rule only checks components that have a <script lang="ts"> or <script lang="tsx"> block, because slots can only be declared with types. It doesn’t report a slot when its name is computed with an expression, or when the declared slots come from a type that Biome can’t read, such as an imported type or an interface that extends another one.

Examples

Invalid

1
<script setup lang="ts">
2
defineSlots<{
3
    default(props: { msg: string }): any;
4
}>();
5
</script>
6

7
<template>
8
    <slot name="footer" />
9
</template>

code-block.vue:8:17 lint/nursery/noVueUndeclaredSlots ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The slot footer isn't declared.
  
     7 │ <template>
   > 8 │     <slot name="footer" />
       │                 ^^^^^^
     9 │ </template>
    10 │ 
  
  ℹ Without a declaration, the content that parent components pass to this slot isn't type checked.
  
  ℹ Declare the slot with defineSlots() in <script setup>, or with the slots option of the component.
  
  ℹ 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.

1
<script lang="ts">
2
import { defineComponent, type SlotsType } from "vue";
3

4
export default defineComponent({
5
    slots: Object as SlotsType<{
6
        header: { title: string };
7
    }>,
8
});
9
</script>
10

11
<template>
12
    <slot />
13
</template>

code-block.vue:12:6 lint/nursery/noVueUndeclaredSlots ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The slot default isn't declared.
  
    11 │ <template>
  > 12 │     <slot />
       │      ^^^^
    13 │ </template>
    14 │ 
  
  ℹ Without a declaration, the content that parent components pass to this slot isn't type checked.
  
  ℹ Declare the slot with defineSlots() in <script setup>, or with the slots option of the component.
  
  ℹ 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

1
<script setup lang="ts">
2
defineSlots<{
3
    default(props: { msg: string }): any;
4
    footer(props: {}): any;
5
}>();
6
</script>
7

8
<template>
9
    <slot msg="hello" />
10
    <slot name="footer" />
11
</template>