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 with defineSlots

• ❗ This rule has not been released yet.

📖 Rule Details

This rule enforces all slots used in the template to be defined once in the script setup block with the defineSlots macro.

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

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

<!-- ✗ BAD -->
<template>
  <div>
    <slot />
  </div>
</template>
<script setup lang="ts"></script>

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

🔧 Options

Nothing.