require-explicit-slots.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/require-explicit-slots	require slots to be explicitly defined with defineSlots

vue/require-explicit-slots

require slots to be explicitly defined

• ❗ This rule has not been released yet.

📖 Rule Details

This rule enforces all slots used in the template to be defined once either in the script setup block with the defineSlots macro, or with the slots property in the Options API.

<template>
  <div>
    <!-- ✓ GOOD -->
    <slot />
    <slot name="foo" />
    <!-- ✗ BAD -->
    <slot name="bar" />
  </div>
</template>
<script setup lang="ts">
defineSlots<{
  default(props: { msg: string }): any
  foo(props: { msg: string }): any
}>()
</script>

<template>
  <div>
    <!-- ✓ GOOD -->
    <slot />
    <slot name="foo" />
    <!-- ✗ BAD -->
    <slot name="bar" />
  </div>
</template>
<script lang="ts">
import { SlotsType } from 'vue'

defineComponent({
  slots: Object as SlotsType<{
    default: { msg: string }
    foo: { msg: string }
  }>
})
</script>

🔧 Options

Nothing.