Skip to content

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>
Now loading...
<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>
Now loading...

🔧 Options

Nothing.

🚀 Version

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

🔍 Implementation