require-explicit-slots.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/require-explicit-slots	require slots to be explicitly defined	v9.21.0

vue/require-explicit-slots

require slots to be explicitly defined

📖 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.

🚀 Version

This rule was introduced in eslint-plugin-vue v9.21.0

🔍 Implementation

• Rule source
• Test source