From 2c6b1e11c72348422d854735fa4581da8247947e Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Sat, 25 Nov 2023 15:27:21 +0900
Subject: [PATCH 1/5] feat: implement require-explicit-slots

---
 docs/rules/require-explicit-slots.md      |  71 +++++++++
 lib/rules/require-explicit-slots.js       |  73 +++++++++
 tests/lib/rules/require-explicit-slots.js | 180 ++++++++++++++++++++++
 3 files changed, 324 insertions(+)
 create mode 100644 docs/rules/require-explicit-slots.md
 create mode 100644 lib/rules/require-explicit-slots.js
 create mode 100644 tests/lib/rules/require-explicit-slots.js

diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
new file mode 100644
index 000000000..94b81942b
--- /dev/null
+++ b/docs/rules/require-explicit-slots.md
@@ -0,0 +1,71 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-explicit-slots
+description: require slots to be explicitly defined with defineSlots
+---
+
+# vue/require-explicit-slots
+
+> require slots to be explicitly defined with defineSlots
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule enforces all slots used in the template to be defined once
+in the `script setup` block with the [`defineSlots`](https://vuejs.org/api/sfc-script-setup.html) macro.
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
+
+```vue
+<!-- ✓ 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>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
new file mode 100644
index 000000000..426b8ed9e
--- /dev/null
+++ b/lib/rules/require-explicit-slots.js
@@ -0,0 +1,73 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require slots to be explicitly defined with defineSlots',
+      categories: ['vue3-strongly-recommended'],
+      url: 'https://eslint.vuejs.org/rules/require-explicit-slots.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      requireExplicitSlots:
+        'Slots must be explicitly defined with the defineSlots macro.',
+      alreadyDefinedSlot: 'Slot {{slotName}} is already defined.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const slotsDefined = new Set()
+
+    return utils.compositingVisitors(
+      utils.defineScriptSetupVisitor(context, {
+        onDefineSlotsEnter(node) {
+          const typeArgument = node.typeArguments.params[0]
+          const slotsDefinitions = typeArgument.members
+
+          for (const slotDefinition of slotsDefinitions) {
+            const slotName = slotDefinition.key.name
+            if (slotsDefined.has(slotName)) {
+              context.report({
+                node: slotDefinition,
+                messageId: 'alreadyDefinedSlot',
+                data: {
+                  slotName
+                }
+              })
+            } else {
+              slotsDefined.add(slotName)
+            }
+          }
+        }
+      }),
+      utils.defineTemplateBodyVisitor(context, {
+        "VElement[name='slot']"(node) {
+          let slotName = 'default'
+
+          const slotNameAttr = node.startTag.attributes.find(
+            (attribute) => attribute.key.name === 'name'
+          )
+
+          if (slotNameAttr) {
+            slotName = slotNameAttr.value.value
+          }
+
+          if (!slotsDefined.has(slotName)) {
+            context.report({
+              node,
+              messageId: 'requireExplicitSlots'
+            })
+          }
+        }
+      })
+    )
+  }
+}
diff --git a/tests/lib/rules/require-explicit-slots.js b/tests/lib/rules/require-explicit-slots.js
new file mode 100644
index 000000000..f9d53d060
--- /dev/null
+++ b/tests/lib/rules/require-explicit-slots.js
@@ -0,0 +1,180 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/require-explicit-slots')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    parser: require.resolve('@typescript-eslint/parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('require-explicit-slots', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      </script>`
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        default(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message:
+            'Slots must be explicitly defined with the defineSlots macro.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script setup lang="ts">
+      defineSlots<{
+        foo(props: { msg: string }): any
+      }>()
+      defineSlots<{
+        default(props: { msg: string }): any,
+        foo(props: { msg: string }): any
+      }>()
+      </script>`,
+      errors: [
+        {
+          message: 'Slot foo is already defined.'
+        }
+      ]
+    }
+  ]
+})

From 63c62aba7e0f441f281d1794453888d35169ffcf Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 9 Jan 2024 18:39:58 +0900
Subject: [PATCH 2/5] feat: make rule compatible with options api

---
 lib/rules/require-explicit-slots.js       |  69 ++++++++++++--
 tests/lib/rules/require-explicit-slots.js | 105 ++++++++++++++++++++--
 2 files changed, 159 insertions(+), 15 deletions(-)

diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
index 426b8ed9e..06dfb0b53 100644
--- a/lib/rules/require-explicit-slots.js
+++ b/lib/rules/require-explicit-slots.js
@@ -6,6 +6,10 @@
 
 const utils = require('../utils')
 
+/**
+ * @typedef {import('@typescript-eslint/types').TSESTree.TypeNode} TypeNode
+ */
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -17,26 +21,77 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      requireExplicitSlots:
-        'Slots must be explicitly defined with the defineSlots macro.',
+      requireExplicitSlots: 'Slots must be explicitly defined.',
       alreadyDefinedSlot: 'Slot {{slotName}} is already defined.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
+    const sourceCode = context.getSourceCode()
+    const documentFragment =
+      sourceCode.parserServices.getDocumentFragment &&
+      sourceCode.parserServices.getDocumentFragment()
+    if (!documentFragment) {
+      return {}
+    }
+    const scripts = documentFragment.children.filter(
+      (element) => utils.isVElement(element) && element.name === 'script'
+    )
+    if (scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))) {
+      return {}
+    }
     const slotsDefined = new Set()
 
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefineSlotsEnter(node) {
-          const typeArgument = node.typeArguments.params[0]
-          const slotsDefinitions = typeArgument.members
+          const typeArguments = node.typeArguments
+          const param = /** @type {TypeNode|undefined} */ (
+            typeArguments?.params[0]
+          )
+          if (!param) return
+
+          if (param.type === 'TSTypeLiteral') {
+            for (const memberNode of param.members) {
+              const slotName = memberNode.key.name
+              if (slotsDefined.has(slotName)) {
+                context.report({
+                  node: memberNode,
+                  messageId: 'alreadyDefinedSlot',
+                  data: {
+                    slotName
+                  }
+                })
+              } else {
+                slotsDefined.add(slotName)
+              }
+            }
+          }
+        }
+      }),
+      utils.executeOnVue(context, (obj) => {
+        const slotsProperty = obj.properties.find(
+          (property) => property.key.name === 'slots'
+        )
+        if (!slotsProperty) return
+
+        const slotsTypeHelper =
+          slotsProperty.value.typeAnnotation.typeName.name === 'SlotsType' &&
+          slotsProperty.value.typeAnnotation
+        if (!slotsTypeHelper) return
+
+        const typeArguments = slotsTypeHelper.typeArguments
+        const param = /** @type {TypeNode|undefined} */ (
+          typeArguments?.params[0]
+        )
+        if (!param) return
 
-          for (const slotDefinition of slotsDefinitions) {
-            const slotName = slotDefinition.key.name
+        if (param.type === 'TSTypeLiteral') {
+          for (const memberNode of param.members) {
+            const slotName = memberNode.key.name
             if (slotsDefined.has(slotName)) {
               context.report({
-                node: slotDefinition,
+                node: memberNode,
                 messageId: 'alreadyDefinedSlot',
                 data: {
                   slotName
diff --git a/tests/lib/rules/require-explicit-slots.js b/tests/lib/rules/require-explicit-slots.js
index f9d53d060..1849ea9a1 100644
--- a/tests/lib/rules/require-explicit-slots.js
+++ b/tests/lib/rules/require-explicit-slots.js
@@ -59,6 +59,76 @@ tester.run('require-explicit-slots', rule, {
         foo(props: { msg: string }): any
       }>()
       </script>`
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          foo(props: { msg: string }): any
+        }>,
+      })
+      </script>`
+    },
+    // does not report any error if the script is not TS
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo"></slot>
+        </div>
+      </template>
+      <script setup>
+      </script>`,
+      parserOptions: {
+        parser: null
+      }
     }
   ],
   invalid: [
@@ -74,8 +144,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -91,8 +160,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -108,8 +176,7 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },
@@ -128,8 +195,30 @@ tester.run('require-explicit-slots', rule, {
       </script>`,
       errors: [
         {
-          message:
-            'Slots must be explicitly defined with the defineSlots macro.'
+          message: 'Slots must be explicitly defined.'
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          <slot name="foo" />
+        </div>
+      </template>
+      <script lang="ts">
+      import { SlotsType } from 'vue'
+
+      defineComponent({
+        slots: Object as SlotsType<{
+          default: { msg: string }
+        }>,
+      })
+      </script>`,
+      errors: [
+        {
+          message: 'Slots must be explicitly defined.'
         }
       ]
     },

From e1da252f55a450fd752df9055f7487edce30b48e Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Mon, 15 Jan 2024 22:02:29 +0900
Subject: [PATCH 3/5] refactor: apply suggestions and improvements

---
 lib/rules/require-explicit-slots.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
index 06dfb0b53..6513992e4 100644
--- a/lib/rules/require-explicit-slots.js
+++ b/lib/rules/require-explicit-slots.js
@@ -15,7 +15,7 @@ module.exports = {
     type: 'problem',
     docs: {
       description: 'require slots to be explicitly defined with defineSlots',
-      categories: ['vue3-strongly-recommended'],
+      categories: undefined,
       url: 'https://eslint.vuejs.org/rules/require-explicit-slots.html'
     },
     fixable: null,
@@ -45,7 +45,8 @@ module.exports = {
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
         onDefineSlotsEnter(node) {
-          const typeArguments = node.typeArguments
+          const typeArguments =
+            'typeArguments' in node ? node.typeArguments : node.typeParameters
           const param = /** @type {TypeNode|undefined} */ (
             typeArguments?.params[0]
           )
@@ -70,17 +71,18 @@ module.exports = {
         }
       }),
       utils.executeOnVue(context, (obj) => {
-        const slotsProperty = obj.properties.find(
-          (property) => property.key.name === 'slots'
-        )
+        const slotsProperty = utils.findProperty(obj, 'slots')
         if (!slotsProperty) return
 
         const slotsTypeHelper =
-          slotsProperty.value.typeAnnotation.typeName.name === 'SlotsType' &&
+          slotsProperty.value.typeAnnotation?.typeName.name === 'SlotsType' &&
           slotsProperty.value.typeAnnotation
         if (!slotsTypeHelper) return
 
-        const typeArguments = slotsTypeHelper.typeArguments
+        const typeArguments =
+          'typeArguments' in slotsTypeHelper
+            ? slotsTypeHelper.typeArguments
+            : slotsTypeHelper.typeParameters
         const param = /** @type {TypeNode|undefined} */ (
           typeArguments?.params[0]
         )
@@ -107,9 +109,7 @@ module.exports = {
         "VElement[name='slot']"(node) {
           let slotName = 'default'
 
-          const slotNameAttr = node.startTag.attributes.find(
-            (attribute) => attribute.key.name === 'name'
-          )
+          const slotNameAttr = utils.getAttribute(node, 'name')
 
           if (slotNameAttr) {
             slotName = slotNameAttr.value.value

From 73046fd3622674639f7adea4679fbf7d45bd3bf2 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Mon, 15 Jan 2024 22:13:24 +0900
Subject: [PATCH 4/5] docs: wrap each case in eslint-code-block

---
 docs/rules/require-explicit-slots.md | 44 ++++++++++++++++++++++++++--
 lib/rules/require-explicit-slots.js  |  2 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
index 94b81942b..83bf9851a 100644
--- a/docs/rules/require-explicit-slots.md
+++ b/docs/rules/require-explicit-slots.md
@@ -7,14 +7,13 @@ description: require slots to be explicitly defined with defineSlots
 
 # vue/require-explicit-slots
 
-> require slots to be explicitly defined with defineSlots
+> require slots to be explicitly defined
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 
 ## :book: Rule Details
 
-This rule enforces all slots used in the template to be defined once
-in the `script setup` block with the [`defineSlots`](https://vuejs.org/api/sfc-script-setup.html) macro.
+This rule enforces all slots used in the template to be defined once either in the `script setup` block with the [`defineSlots`](https://vuejs.org/api/sfc-script-setup.html) macro, or with the [`slots property`](https://vuejs.org/api/options-rendering.html#slots) in the Options API.
 
 <eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
@@ -30,7 +29,13 @@ defineSlots<{
   default(props: { msg: string }): any
 }>()
 </script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
+```vue
 <!-- ✓ GOOD -->
 <template>
   <div>
@@ -42,7 +47,34 @@ defineSlots<{
   foo(props: { msg: string }): any
 }>()
 </script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <slot name="foo" />
+  </div>
+</template>
+<script lang="ts">
+import { SlotsType } from 'vue'
+defineComponent({
+  slots: Object as SlotsType<{
+    foo: { msg: string }
+  }>
+})
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
+```vue
 <!-- ✗ BAD -->
 <template>
   <div>
@@ -50,7 +82,13 @@ defineSlots<{
   </div>
 </template>
 <script setup lang="ts"></script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
+```vue
 <!-- ✗ BAD -->
 <template>
   <div>
diff --git a/lib/rules/require-explicit-slots.js b/lib/rules/require-explicit-slots.js
index 6513992e4..ed2d2edb9 100644
--- a/lib/rules/require-explicit-slots.js
+++ b/lib/rules/require-explicit-slots.js
@@ -14,7 +14,7 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'require slots to be explicitly defined with defineSlots',
+      description: 'require slots to be explicitly defined',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/require-explicit-slots.html'
     },

From 880b9db410fbe43831659052fd01edf381efe2bb Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 16 Jan 2024 11:53:24 +0900
Subject: [PATCH 5/5] docs: reduce number of examples and link related rule

---
 docs/rules/require-explicit-emits.md |  1 +
 docs/rules/require-explicit-slots.md | 61 +++++-----------------------
 2 files changed, 11 insertions(+), 51 deletions(-)

diff --git a/docs/rules/require-explicit-emits.md b/docs/rules/require-explicit-emits.md
index f7ce60dd6..90cb03edb 100644
--- a/docs/rules/require-explicit-emits.md
+++ b/docs/rules/require-explicit-emits.md
@@ -112,6 +112,7 @@ export default {
 ## :couple: Related Rules
 
 - [vue/no-unused-emit-declarations](./no-unused-emit-declarations.md)
+- [vue/require-explicit-slots](./require-explicit-slots.md)
 
 ## :books: Further Reading
 
diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
index 83bf9851a..ac3050896 100644
--- a/docs/rules/require-explicit-slots.md
+++ b/docs/rules/require-explicit-slots.md
@@ -18,32 +18,18 @@ This rule enforces all slots used in the template to be defined once either in t
 <eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
 ```vue
-<!-- ✓ GOOD -->
 <template>
   <div>
+    <!-- ✓ GOOD -->
     <slot />
-  </div>
-</template>
-<script setup lang="ts">
-defineSlots<{
-  default(props: { msg: string }): any
-}>()
-</script>
-```
-
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
-
-```vue
-<!-- ✓ GOOD -->
-<template>
-  <div>
     <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>
@@ -54,16 +40,21 @@ defineSlots<{
 <eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
 
 ```vue
-<!-- ✓ GOOD -->
 <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 }
   }>
 })
@@ -72,38 +63,6 @@ defineComponent({
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
-
-```vue
-<!-- ✗ BAD -->
-<template>
-  <div>
-    <slot />
-  </div>
-</template>
-<script setup lang="ts"></script>
-```
-
-</eslint-code-block>
-
-<eslint-code-block :rules="{'vue/require-explicit-slots': ['error']}">
-
-```vue
-<!-- ✗ BAD -->
-<template>
-  <div>
-    <slot name="foo" />
-  </div>
-</template>
-<script setup lang="ts">
-defineSlots<{
-  bar(props: { msg: string }): any
-}>()
-</script>
-```
-
-</eslint-code-block>
-
 ## :wrench: Options
 
 Nothing.