From ab0fa23cef3125c21b861a37755587e63e783a95 Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 15:02:48 +0900
Subject: [PATCH 1/7] Add `vue/no-undef-components-in-script-setup` rule

---
 docs/rules/README.md                          |   1 +
 .../no-undef-components-in-script-setup.md    |  76 ++++++++
 lib/index.js                                  |   1 +
 .../no-undef-components-in-script-setup.js    | 144 +++++++++++++++
 .../no-undef-components-in-script-setup.js    | 172 ++++++++++++++++++
 5 files changed, 394 insertions(+)
 create mode 100644 docs/rules/no-undef-components-in-script-setup.md
 create mode 100644 lib/rules/no-undef-components-in-script-setup.js
 create mode 100644 tests/lib/rules/no-undef-components-in-script-setup.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 49a6c6389..e4aa8d59b 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -341,6 +341,7 @@ For example:
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
 | [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
 | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  |
+| [vue/no-undef-components-in-script-setup](./no-undef-components-in-script-setup.md) | disallow undefined components in `<template>` with `<script setup>` |  |
 | [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  |
 | [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates |  |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
diff --git a/docs/rules/no-undef-components-in-script-setup.md b/docs/rules/no-undef-components-in-script-setup.md
new file mode 100644
index 000000000..c77850ece
--- /dev/null
+++ b/docs/rules/no-undef-components-in-script-setup.md
@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-undef-components-in-script-setup
+description: disallow undefined components in `<template>` with `<script setup>`
+---
+# vue/no-undef-components-in-script-setup
+
+> disallow undefined components in `<template>` with `<script setup>`
+
+- :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 warns that the component used in the `<template>` is not defined in `<script setup>`.  
+
+Undefined components in `<script setup>` will be resolved from the components registered in the global. However, if you are not using global components, you can use this rule to prevent run-time errors.
+
+<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error']}">
+
+```vue
+<script setup>
+import Foo from './Foo.vue'
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <Foo />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-undef-components-in-script-setup": ["error", {
+    "ignorePatterns": []
+  }]
+}
+```
+
+- `ignorePatterns` Suppresses all errors if component name matches one or more patterns.
+
+### `ignorePatterns: ['custom(\\-\\w+)+']`
+
+<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+
+```vue
+<script setup>
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <CustomComponent />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-unregistered-components](./no-unregistered-components.md)
+- [vue/no-undef-properties](./no-undef-properties.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-undef-components-in-script-setup.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-undef-components-in-script-setup.js)
diff --git a/lib/index.js b/lib/index.js
index 021710984..223feedd5 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -128,6 +128,7 @@ module.exports = {
     'no-template-target-blank': require('./rules/no-template-target-blank'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
     'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
+    'no-undef-components-in-script-setup': require('./rules/no-undef-components-in-script-setup'),
     'no-undef-properties': require('./rules/no-undef-properties'),
     'no-unregistered-components': require('./rules/no-unregistered-components'),
     'no-unsupported-features': require('./rules/no-unsupported-features'),
diff --git a/lib/rules/no-undef-components-in-script-setup.js b/lib/rules/no-undef-components-in-script-setup.js
new file mode 100644
index 000000000..7bc5ef118
--- /dev/null
+++ b/lib/rules/no-undef-components-in-script-setup.js
@@ -0,0 +1,144 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow undefined components in `<template>` with `<script setup>`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-undef-components-in-script-setup.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignorePatterns: {
+            type: 'array'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      undef:
+        "The '<{{name}}>' component has been used, but not defined in <script setup>."
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    if (!utils.isScriptSetup(context)) {
+      return {}
+    }
+    const options = context.options[0] || {}
+    /** @type {string[]} */
+    const ignorePatterns = options.ignorePatterns || []
+
+    /** @type {Set<string>} */
+    const scriptVariableNames = new Set()
+    const globalScope = context.getSourceCode().scopeManager.globalScope
+    if (globalScope) {
+      for (const variable of globalScope.variables) {
+        scriptVariableNames.add(variable.name)
+      }
+      const moduleScope = globalScope.childScopes.find(
+        (scope) => scope.type === 'module'
+      )
+      for (const variable of (moduleScope && moduleScope.variables) || []) {
+        scriptVariableNames.add(variable.name)
+      }
+    }
+    /**
+     * `casing.camelCase()` converts the beginning to lowercase,
+     * but does not convert the case of the beginning character when converting with Vue3.
+     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/shared/src/index.ts#L105
+     * @param {string} str
+     */
+    function camelize(str) {
+      return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+    }
+    /**
+     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
+     * @param {string} name
+     */
+    function existsSetupReference(name) {
+      if (scriptVariableNames.has(name)) {
+        return true
+      }
+      const camelName = camelize(name)
+      if (scriptVariableNames.has(camelName)) {
+        return true
+      }
+      const pascalName = casing.capitalize(camelName)
+      if (scriptVariableNames.has(pascalName)) {
+        return true
+      }
+      return false
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      VElement(node) {
+        if (
+          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
+          (node.rawName === node.name &&
+            (utils.isHtmlWellKnownElementName(node.rawName) ||
+              utils.isSvgWellKnownElementName(node.rawName))) ||
+          utils.isBuiltInComponentName(node.rawName)
+        ) {
+          return
+        }
+        if (existsSetupReference(node.rawName)) {
+          return
+        }
+        // Check namespace
+        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
+        const dotIndex = node.rawName.indexOf('.')
+        if (dotIndex > 0) {
+          if (existsSetupReference(node.rawName.slice(0, dotIndex))) {
+            return
+          }
+        }
+
+        // Check ignored patterns
+        if (
+          ignorePatterns.some((pattern) => {
+            const regExp = new RegExp(pattern)
+            return (
+              regExp.test(node.rawName) ||
+              regExp.test(casing.kebabCase(node.rawName)) ||
+              regExp.test(casing.pascalCase(node.rawName)) ||
+              regExp.test(casing.camelCase(node.rawName)) ||
+              regExp.test(casing.snakeCase(node.rawName))
+            )
+          })
+        ) {
+          return
+        }
+
+        context.report({
+          node: node.startTag,
+          messageId: 'undef',
+          data: {
+            name: node.rawName
+          }
+        })
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-undef-components-in-script-setup.js b/tests/lib/rules/no-undef-components-in-script-setup.js
new file mode 100644
index 000000000..092e3aa6c
--- /dev/null
+++ b/tests/lib/rules/no-undef-components-in-script-setup.js
@@ -0,0 +1,172 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-undef-components-in-script-setup')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-undef-components-in-script-setup', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import Foo from './Foo.vue'
+      </script>
+
+      <template>
+        <Foo />
+        <Teleport />
+        <template v-if="foo"></template>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import FooPascalCase from './component.vue'
+        import BarPascalCase from './component.vue'
+        import BazPascalCase from './component.vue'
+      </script>
+
+      <template>
+        <FooPascalCase />
+        <bar-pascal-case />
+        <bazPascalCase />
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import fooCamelCase from './component.vue'
+      import barCamelCase from './component.vue'
+      </script>
+
+      <template>
+        <fooCamelCase />
+        <bar-camel-case />
+      </template>
+      `
+    },
+    // namespace
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import * as Form from './form-components'
+      </script>
+
+      <template>
+        <Form.Input>
+          <Form.Label>label</Form.Label>
+        </Form.Input>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <Foo />
+      </template>
+      `,
+      options: [{ ignorePatterns: ['Foo'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <CustomComponent />
+      </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <Foo />
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<Foo>' component has been used, but not defined in <script setup>.",
+          line: 7,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import PascalCase from './component.vue'
+      </script>
+
+      <template>
+        <pascal_case />
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<pascal_case>' component has been used, but not defined in <script setup>.",
+          line: 7,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import * as Form from './form-components'
+      </script>
+
+      <template>
+        <Foo.Input />
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<Foo.Input>' component has been used, but not defined in <script setup>.",
+          line: 8,
+          column: 9
+        }
+      ]
+    }
+  ]
+})

From 85848796a0600701f22bf13239f176c842926769 Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 15:07:20 +0900
Subject: [PATCH 2/7] fix test case

---
 tests/lib/rules/no-undef-components-in-script-setup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/no-undef-components-in-script-setup.js b/tests/lib/rules/no-undef-components-in-script-setup.js
index 092e3aa6c..c566ead47 100644
--- a/tests/lib/rules/no-undef-components-in-script-setup.js
+++ b/tests/lib/rules/no-undef-components-in-script-setup.js
@@ -163,7 +163,7 @@ tester.run('no-undef-components-in-script-setup', rule, {
         {
           message:
             "The '<Foo.Input>' component has been used, but not defined in <script setup>.",
-          line: 8,
+          line: 7,
           column: 9
         }
       ]

From 97968877779efd6c70e4ddb2f8b0db87d03a81ca Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 18:52:57 +0900
Subject: [PATCH 3/7] Renamed rule and marked no-unregistered-components as
 deprecated

---
 docs/rules/README.md                          |   4 +-
 .../no-undef-components-in-script-setup.md    |  76 --
 docs/rules/no-undef-components.md             | 183 ++++
 docs/rules/no-unregistered-components.md      |   2 +
 lib/index.js                                  |   2 +-
 .../no-undef-components-in-script-setup.js    | 144 ---
 lib/rules/no-undef-components.js              | 270 +++++
 lib/rules/no-unregistered-components.js       |   4 +-
 .../no-undef-components-in-script-setup.js    | 172 ----
 tests/lib/rules/no-undef-components.js        | 923 ++++++++++++++++++
 10 files changed, 1384 insertions(+), 396 deletions(-)
 delete mode 100644 docs/rules/no-undef-components-in-script-setup.md
 create mode 100644 docs/rules/no-undef-components.md
 delete mode 100644 lib/rules/no-undef-components-in-script-setup.js
 create mode 100644 lib/rules/no-undef-components.js
 delete mode 100644 tests/lib/rules/no-undef-components-in-script-setup.js
 create mode 100644 tests/lib/rules/no-undef-components.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index e4aa8d59b..c9d0c4d37 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -341,9 +341,8 @@ For example:
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
 | [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
 | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  |
-| [vue/no-undef-components-in-script-setup](./no-undef-components-in-script-setup.md) | disallow undefined components in `<template>` with `<script setup>` |  |
+| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  |
 | [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  |
-| [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates |  |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
 | [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  |
 | [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  |
@@ -414,3 +413,4 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/experimental-script-setup-vars](./experimental-script-setup-vars.md) | (no replacement) |
 | [vue/name-property-casing](./name-property-casing.md) | [vue/component-definition-name-casing](./component-definition-name-casing.md) |
 | [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) |
+| [vue/no-unregistered-components](./no-unregistered-components.md) | [vue/no-undef-components](./no-undef-components.md) |
diff --git a/docs/rules/no-undef-components-in-script-setup.md b/docs/rules/no-undef-components-in-script-setup.md
deleted file mode 100644
index c77850ece..000000000
--- a/docs/rules/no-undef-components-in-script-setup.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-pageClass: rule-details
-sidebarDepth: 0
-title: vue/no-undef-components-in-script-setup
-description: disallow undefined components in `<template>` with `<script setup>`
----
-# vue/no-undef-components-in-script-setup
-
-> disallow undefined components in `<template>` with `<script setup>`
-
-- :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 warns that the component used in the `<template>` is not defined in `<script setup>`.  
-
-Undefined components in `<script setup>` will be resolved from the components registered in the global. However, if you are not using global components, you can use this rule to prevent run-time errors.
-
-<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error']}">
-
-```vue
-<script setup>
-import Foo from './Foo.vue'
-</script>
-
-<template>
-  <!-- ✓ GOOD -->
-  <Foo />
-
-  <!-- ✗ BAD -->
-  <Bar />
-</template>
-```
-
-</eslint-code-block>
-
-## :wrench: Options
-
-```json
-{
-  "vue/no-undef-components-in-script-setup": ["error", {
-    "ignorePatterns": []
-  }]
-}
-```
-
-- `ignorePatterns` Suppresses all errors if component name matches one or more patterns.
-
-### `ignorePatterns: ['custom(\\-\\w+)+']`
-
-<eslint-code-block :rules="{'vue/no-undef-components-in-script-setup': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
-
-```vue
-<script setup>
-</script>
-
-<template>
-  <!-- ✓ GOOD -->
-  <CustomComponent />
-
-  <!-- ✗ BAD -->
-  <Bar />
-</template>
-```
-
-</eslint-code-block>
-
-## :couple: Related Rules
-
-- [vue/no-unregistered-components](./no-unregistered-components.md)
-- [vue/no-undef-properties](./no-undef-properties.md)
-
-## :mag: Implementation
-
-- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-undef-components-in-script-setup.js)
-- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-undef-components-in-script-setup.js)
diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
new file mode 100644
index 000000000..ac57942c5
--- /dev/null
+++ b/docs/rules/no-undef-components.md
@@ -0,0 +1,183 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-undef-components
+description: disallow use of undefined components in `<template>`
+---
+# vue/no-undef-components
+
+> disallow use of undefined components in `<template>`
+
+- :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 warns that the component used in the `<template>` is not defined in `<script setup>`.  
+
+This rule reports components that haven't been defined and are being used in the `<template>`.
+
+Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.
+
+::: warning Note
+This rule cannot check globally registered components and components registered in mixins
+unless you add them as part of the ignored patterns.
+:::
+
+<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
+
+```vue
+<script setup>
+import Foo from './Foo.vue'
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <Foo />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <the-modal>
+      <component is="TheInput" />
+      <component :is="'TheDropdown'" />
+      <TheButton>CTA</TheButton>
+    </the-modal>
+  </div>
+</template>
+
+<script>
+import TheButton from 'components/TheButton.vue'
+import TheModal from 'components/TheModal.vue'
+import TheInput from 'components/TheInput.vue'
+import TheDropdown from 'components/TheDropdown.vue'
+
+export default {
+  components: {
+    TheButton,
+    TheModal,
+    TheInput,
+    TheDropdown,
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-undef-components': ['error']}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <TheModal />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/no-undef-components": ["error", {
+    "ignorePatterns": []
+  }]
+}
+```
+
+- `ignorePatterns` Suppresses all errors if component name matches one or more patterns.
+
+### `ignorePatterns: ['custom(\\-\\w+)+']`
+
+<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+
+```vue
+<script setup>
+</script>
+
+<template>
+  <!-- ✓ GOOD -->
+  <CustomComponent />
+
+  <!-- ✗ BAD -->
+  <Bar />
+</template>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unbdef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <CustomComponent />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+
+    },
+  }
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-unbdef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>
+  <div>
+    <h2>Lorem ipsum</h2>
+    <WarmButton />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+
+    },
+  }
+</script>
+```
+
+</eslint-code-block>
+
+## :couple: Related Rules
+
+- [vue/no-unregistered-components](./no-unregistered-components.md)
+- [vue/no-undef-properties](./no-undef-properties.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-undef-components.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-undef-components.js)
diff --git a/docs/rules/no-unregistered-components.md b/docs/rules/no-unregistered-components.md
index 20e2867bf..761431cff 100644
--- a/docs/rules/no-unregistered-components.md
+++ b/docs/rules/no-unregistered-components.md
@@ -9,6 +9,8 @@ since: v7.0.0
 
 > disallow using components that are not registered inside templates
 
+- :warning: This rule was **deprecated** and replaced by [vue/no-undef-components](no-undef-components.md) rule.
+
 ## :book: Rule Details
 
 This rule reports components that haven't been registered and are being used in the template.
diff --git a/lib/index.js b/lib/index.js
index 223feedd5..e6bfb0540 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -128,7 +128,7 @@ module.exports = {
     'no-template-target-blank': require('./rules/no-template-target-blank'),
     'no-textarea-mustache': require('./rules/no-textarea-mustache'),
     'no-this-in-before-route-enter': require('./rules/no-this-in-before-route-enter'),
-    'no-undef-components-in-script-setup': require('./rules/no-undef-components-in-script-setup'),
+    'no-undef-components': require('./rules/no-undef-components'),
     'no-undef-properties': require('./rules/no-undef-properties'),
     'no-unregistered-components': require('./rules/no-unregistered-components'),
     'no-unsupported-features': require('./rules/no-unsupported-features'),
diff --git a/lib/rules/no-undef-components-in-script-setup.js b/lib/rules/no-undef-components-in-script-setup.js
deleted file mode 100644
index 7bc5ef118..000000000
--- a/lib/rules/no-undef-components-in-script-setup.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * @author Yosuke Ota
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const utils = require('../utils')
-const casing = require('../utils/casing')
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
-  meta: {
-    type: 'suggestion',
-    docs: {
-      description:
-        'disallow undefined components in `<template>` with `<script setup>`',
-      categories: undefined,
-      url: 'https://eslint.vuejs.org/rules/no-undef-components-in-script-setup.html'
-    },
-    fixable: null,
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          ignorePatterns: {
-            type: 'array'
-          }
-        },
-        additionalProperties: false
-      }
-    ],
-    messages: {
-      undef:
-        "The '<{{name}}>' component has been used, but not defined in <script setup>."
-    }
-  },
-  /** @param {RuleContext} context */
-  create(context) {
-    if (!utils.isScriptSetup(context)) {
-      return {}
-    }
-    const options = context.options[0] || {}
-    /** @type {string[]} */
-    const ignorePatterns = options.ignorePatterns || []
-
-    /** @type {Set<string>} */
-    const scriptVariableNames = new Set()
-    const globalScope = context.getSourceCode().scopeManager.globalScope
-    if (globalScope) {
-      for (const variable of globalScope.variables) {
-        scriptVariableNames.add(variable.name)
-      }
-      const moduleScope = globalScope.childScopes.find(
-        (scope) => scope.type === 'module'
-      )
-      for (const variable of (moduleScope && moduleScope.variables) || []) {
-        scriptVariableNames.add(variable.name)
-      }
-    }
-    /**
-     * `casing.camelCase()` converts the beginning to lowercase,
-     * but does not convert the case of the beginning character when converting with Vue3.
-     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/shared/src/index.ts#L105
-     * @param {string} str
-     */
-    function camelize(str) {
-      return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
-    }
-    /**
-     * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
-     * @param {string} name
-     */
-    function existsSetupReference(name) {
-      if (scriptVariableNames.has(name)) {
-        return true
-      }
-      const camelName = camelize(name)
-      if (scriptVariableNames.has(camelName)) {
-        return true
-      }
-      const pascalName = casing.capitalize(camelName)
-      if (scriptVariableNames.has(pascalName)) {
-        return true
-      }
-      return false
-    }
-
-    return utils.defineTemplateBodyVisitor(context, {
-      VElement(node) {
-        if (
-          (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
-          (node.rawName === node.name &&
-            (utils.isHtmlWellKnownElementName(node.rawName) ||
-              utils.isSvgWellKnownElementName(node.rawName))) ||
-          utils.isBuiltInComponentName(node.rawName)
-        ) {
-          return
-        }
-        if (existsSetupReference(node.rawName)) {
-          return
-        }
-        // Check namespace
-        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
-        const dotIndex = node.rawName.indexOf('.')
-        if (dotIndex > 0) {
-          if (existsSetupReference(node.rawName.slice(0, dotIndex))) {
-            return
-          }
-        }
-
-        // Check ignored patterns
-        if (
-          ignorePatterns.some((pattern) => {
-            const regExp = new RegExp(pattern)
-            return (
-              regExp.test(node.rawName) ||
-              regExp.test(casing.kebabCase(node.rawName)) ||
-              regExp.test(casing.pascalCase(node.rawName)) ||
-              regExp.test(casing.camelCase(node.rawName)) ||
-              regExp.test(casing.snakeCase(node.rawName))
-            )
-          })
-        ) {
-          return
-        }
-
-        context.report({
-          node: node.startTag,
-          messageId: 'undef',
-          data: {
-            name: node.rawName
-          }
-        })
-      }
-    })
-  }
-}
diff --git a/lib/rules/no-undef-components.js b/lib/rules/no-undef-components.js
new file mode 100644
index 000000000..aa9ddb0dd
--- /dev/null
+++ b/lib/rules/no-undef-components.js
@@ -0,0 +1,270 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * `casing.camelCase()` converts the beginning to lowercase,
+ * but does not convert the case of the beginning character when converting with Vue3.
+ * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/shared/src/index.ts#L105
+ * @param {string} str
+ */
+function camelize(str) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow use of undefined components in `<template>`',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-undef-components.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignorePatterns: {
+            type: 'array'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      undef: "The '<{{name}}>' component has been used, but not defined."
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const options = context.options[0] || {}
+    /** @type {string[]} */
+    const ignorePatterns = options.ignorePatterns || []
+
+    /**
+     * Check whether the given element name is a verify target or not.
+     *
+     * @param {string} rawName The element name.
+     * @returns {boolean}
+     */
+    function isVerifyTargetComponent(rawName) {
+      const kebabCaseName = casing.kebabCase(rawName)
+
+      if (
+        utils.isHtmlWellKnownElementName(rawName) ||
+        utils.isSvgWellKnownElementName(rawName) ||
+        utils.isBuiltInComponentName(kebabCaseName)
+      ) {
+        return false
+      }
+      const pascalCaseName = casing.pascalCase(rawName)
+      // Check ignored patterns
+      if (
+        ignorePatterns.some((pattern) => {
+          const regExp = new RegExp(pattern)
+          return (
+            regExp.test(rawName) ||
+            regExp.test(kebabCaseName) ||
+            regExp.test(pascalCaseName)
+          )
+        })
+      ) {
+        return false
+      }
+      return true
+    }
+
+    /** @type { (rawName:string, reportNode: ASTNode) => void } */
+    let verifyName
+    /** @type {RuleListener} */
+    let scriptVisitor = {}
+    /** @type {TemplateListener} */
+    const templateBodyVisitor = {
+      VElement(node) {
+        if (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) {
+          return
+        }
+        verifyName(node.rawName, node.startTag)
+      },
+      /** @param {VAttribute} node */
+      "VAttribute[directive=false][key.name='is']"(node) {
+        if (
+          !node.value // `<component is />`
+        )
+          return
+        const value = node.value.value.startsWith('vue:') // Usage on native elements 3.1+
+          ? node.value.value.slice(4)
+          : node.value.value
+        verifyName(value, node)
+      }
+    }
+
+    if (utils.isScriptSetup(context)) {
+      // For <script setup>
+      /** @type {Set<string>} */
+      const scriptVariableNames = new Set()
+      const globalScope = context.getSourceCode().scopeManager.globalScope
+      if (globalScope) {
+        for (const variable of globalScope.variables) {
+          scriptVariableNames.add(variable.name)
+        }
+        const moduleScope = globalScope.childScopes.find(
+          (scope) => scope.type === 'module'
+        )
+        for (const variable of (moduleScope && moduleScope.variables) || []) {
+          scriptVariableNames.add(variable.name)
+        }
+      }
+      /**
+       * @see https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L334
+       * @param {string} name
+       */
+      const existsSetupReference = (name) => {
+        if (scriptVariableNames.has(name)) {
+          return true
+        }
+        const camelName = camelize(name)
+        if (scriptVariableNames.has(camelName)) {
+          return true
+        }
+        const pascalName = casing.capitalize(camelName)
+        if (scriptVariableNames.has(pascalName)) {
+          return true
+        }
+        return false
+      }
+      verifyName = (rawName, reportNode) => {
+        if (!isVerifyTargetComponent(rawName)) {
+          return
+        }
+        if (existsSetupReference(rawName)) {
+          return
+        }
+        // Check namespace
+        // https://github.com/vuejs/core/blob/ae4b0783d78670b6e942ae2a4e3ec6efbbffa158/packages/compiler-core/src/transforms/transformElement.ts#L305
+        const dotIndex = rawName.indexOf('.')
+        if (dotIndex > 0) {
+          if (existsSetupReference(rawName.slice(0, dotIndex))) {
+            return
+          }
+        }
+
+        context.report({
+          node: reportNode,
+          messageId: 'undef',
+          data: {
+            name: rawName
+          }
+        })
+      }
+    } else {
+      // For Options API
+
+      /**
+       * All registered components
+       * @type {string[]}
+       */
+      const registeredComponentNames = []
+      /**
+       * All registered components, transformed to kebab-case
+       * @type {string[]}
+       */
+      const registeredComponentKebabCaseNames = []
+
+      /**
+       * All registered components using kebab-case syntax
+       * @type {string[]}
+       */
+      const componentsRegisteredAsKebabCase = []
+
+      scriptVisitor = utils.executeOnVue(context, (obj) => {
+        registeredComponentNames.push(
+          ...utils.getRegisteredComponents(obj).map(({ name }) => name)
+        )
+
+        const nameProperty = utils.findProperty(obj, 'name')
+
+        if (nameProperty) {
+          if (nameProperty.value.type === 'Literal') {
+            registeredComponentNames.push(`${nameProperty.value.value}`)
+          }
+        }
+
+        registeredComponentKebabCaseNames.push(
+          ...registeredComponentNames.map((name) => casing.kebabCase(name))
+        )
+        componentsRegisteredAsKebabCase.push(
+          ...registeredComponentNames.filter(
+            (name) => name === casing.kebabCase(name)
+          )
+        )
+      })
+
+      verifyName = (rawName, reportNode) => {
+        if (!isVerifyTargetComponent(rawName)) {
+          return
+        }
+        if (registeredComponentNames.includes(rawName)) {
+          return
+        }
+        const kebabCaseName = casing.kebabCase(rawName)
+        if (registeredComponentKebabCaseNames.includes(kebabCaseName)) {
+          if (
+            // Component registered as `foo-bar` cannot be used as `FooBar`
+            !casing.isPascalCase(rawName)
+          ) {
+            return
+          }
+        }
+
+        context.report({
+          node: reportNode,
+          messageId: 'undef',
+          data: {
+            name: rawName
+          }
+        })
+      }
+
+      /** @param {VDirective} node */
+      templateBodyVisitor[
+        "VAttribute[directive=true][key.name.name='bind'][key.argument.name='is'], VAttribute[directive=true][key.name.name='is']"
+      ] = (node) => {
+        if (
+          !node.value ||
+          node.value.type !== 'VExpressionContainer' ||
+          !node.value.expression
+        )
+          return
+
+        if (node.value.expression.type === 'Literal') {
+          verifyName(`${node.value.expression.value}`, node)
+        }
+      }
+    }
+
+    return utils.defineTemplateBodyVisitor(
+      context,
+      templateBodyVisitor,
+      scriptVisitor
+    )
+  }
+}
diff --git a/lib/rules/no-unregistered-components.js b/lib/rules/no-unregistered-components.js
index 5cc22a9f8..efd265e55 100644
--- a/lib/rules/no-unregistered-components.js
+++ b/lib/rules/no-unregistered-components.js
@@ -44,8 +44,10 @@ module.exports = {
         'disallow using components that are not registered inside templates',
       categories: null,
       recommended: false,
-      url: 'https://eslint.vuejs.org/rules/no-unregistered-components.html'
+      url: 'https://eslint.vuejs.org/rules/no-unregistered-components.html',
+      replacedBy: ['no-undef-components']
     },
+    deprecated: true,
     fixable: null,
     schema: [
       {
diff --git a/tests/lib/rules/no-undef-components-in-script-setup.js b/tests/lib/rules/no-undef-components-in-script-setup.js
deleted file mode 100644
index c566ead47..000000000
--- a/tests/lib/rules/no-undef-components-in-script-setup.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * @author Yosuke Ota
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-const RuleTester = require('eslint').RuleTester
-const rule = require('../../../lib/rules/no-undef-components-in-script-setup')
-
-const tester = new RuleTester({
-  parser: require.resolve('vue-eslint-parser'),
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module'
-  }
-})
-
-tester.run('no-undef-components-in-script-setup', rule, {
-  valid: [
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-        import Foo from './Foo.vue'
-      </script>
-
-      <template>
-        <Foo />
-        <Teleport />
-        <template v-if="foo"></template>
-      </template>
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-        import FooPascalCase from './component.vue'
-        import BarPascalCase from './component.vue'
-        import BazPascalCase from './component.vue'
-      </script>
-
-      <template>
-        <FooPascalCase />
-        <bar-pascal-case />
-        <bazPascalCase />
-      </template>
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import fooCamelCase from './component.vue'
-      import barCamelCase from './component.vue'
-      </script>
-
-      <template>
-        <fooCamelCase />
-        <bar-camel-case />
-      </template>
-      `
-    },
-    // namespace
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import * as Form from './form-components'
-      </script>
-
-      <template>
-        <Form.Input>
-          <Form.Label>label</Form.Label>
-        </Form.Input>
-      </template>
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import Bar from './Bar.vue'
-      </script>
-
-      <template>
-        <Foo />
-      </template>
-      `,
-      options: [{ ignorePatterns: ['Foo'] }]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import Bar from './Bar.vue'
-      </script>
-
-      <template>
-        <CustomComponent />
-      </template>
-      `,
-      options: [
-        {
-          ignorePatterns: ['custom(\\-\\w+)+']
-        }
-      ]
-    }
-  ],
-  invalid: [
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import Bar from './Bar.vue'
-      </script>
-
-      <template>
-        <Foo />
-      </template>
-      `,
-      errors: [
-        {
-          message:
-            "The '<Foo>' component has been used, but not defined in <script setup>.",
-          line: 7,
-          column: 9
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import PascalCase from './component.vue'
-      </script>
-
-      <template>
-        <pascal_case />
-      </template>
-      `,
-      errors: [
-        {
-          message:
-            "The '<pascal_case>' component has been used, but not defined in <script setup>.",
-          line: 7,
-          column: 9
-        }
-      ]
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script setup>
-      import * as Form from './form-components'
-      </script>
-
-      <template>
-        <Foo.Input />
-      </template>
-      `,
-      errors: [
-        {
-          message:
-            "The '<Foo.Input>' component has been used, but not defined in <script setup>.",
-          line: 7,
-          column: 9
-        }
-      ]
-    }
-  ]
-})
diff --git a/tests/lib/rules/no-undef-components.js b/tests/lib/rules/no-undef-components.js
new file mode 100644
index 000000000..8bc637f45
--- /dev/null
+++ b/tests/lib/rules/no-undef-components.js
@@ -0,0 +1,923 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-undef-components')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-undef-components', rule, {
+  valid: [
+    // <script setup>
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import Foo from './Foo.vue'
+      </script>
+
+      <template>
+        <Foo />
+        <Teleport />
+        <template v-if="foo"></template>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+        import FooPascalCase from './component.vue'
+        import BarPascalCase from './component.vue'
+        import BazPascalCase from './component.vue'
+      </script>
+
+      <template>
+        <FooPascalCase />
+        <bar-pascal-case />
+        <bazPascalCase />
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import fooCamelCase from './component.vue'
+      import barCamelCase from './component.vue'
+      </script>
+
+      <template>
+        <fooCamelCase />
+        <bar-camel-case />
+      </template>
+      `
+    },
+    // namespace
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import * as Form from './form-components'
+      </script>
+
+      <template>
+        <Form.Input>
+          <Form.Label>label</Form.Label>
+        </Form.Input>
+      </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <Foo />
+      </template>
+      `,
+      options: [{ ignorePatterns: ['Foo'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <CustomComponent />
+      </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ]
+    },
+
+    // options API
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>Lorem ipsum</div>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent>
+            Some text
+          </CustomComponent>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom-component>
+            Some text
+          </custom-component>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom-component>
+            Some text
+          </custom-component>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['Custom(\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom_component>
+            Some text
+          </custom_component>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['Custom(\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <customComponent>
+            Some text
+          </customComponent>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['Custom(\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <customComponent>
+            <warm-code>Text</warm-code>
+            <InfoBtnPrimary value="text" />
+          </customComponent>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['Custom(\\w+)+', 'Warm(\\w+)+', 'InfoBtn(\\w+)+']
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent>
+            Some text
+          </CustomComponent>
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'">
+            Some text
+          </component>
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component v-if="showComponent" :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          data: () => ({
+            showComponent: true
+          }),
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component v-if="showComponent" :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          data: () => ({
+            showComponent: false
+          }),
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'div'" />
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="div" />
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="span">
+            Text
+          </component>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Component is="div" />
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Component is="span">
+            Text
+          </Component>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="name" />
+        </template>
+        <script>
+        export default {
+          data: () => ({ name: 'div' })
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="name" />
+        </template>
+        <script>
+        export default {
+          data: () => ({ name: 'warm-button' }),
+          components: { WarmButton }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <teleport />
+          <suspense />
+          <suspense>
+            <div>Text</div>
+          </suspense>
+          <Teleport />
+          <Suspense />
+          <Suspense>
+            <div>Text</div>
+          </Suspense>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <transition />
+          <transition-group />
+          <keep-alive />
+          <transition>
+            <div>Text</div>
+          </transition>
+          <TransitionGroup />
+          <KeepAlive />
+          <Transition>
+            <div>Text</div>
+          </Transition>
+          <Slot />
+          <slot />
+          <slot>
+            foo
+          </slot>
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Custom-Component />
+        </template>
+        <script>
+        export default {
+          components: {
+            'custom-component': InfoPrimaryWrapper
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is />
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <Component is />
+        </template>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponent
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom-component />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="CustomComponent" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component is="vue:CustomComponent" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          name: 'CustomComponent'
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponentWithNamedSlots>
+            <template #slotA>
+              <div>Text</div>
+            </template>
+          </CustomComponentWithNamedSlots>
+        </template>
+        <script>
+        export default {
+          components: {
+            CustomComponentWithNamedSlots
+          }
+        }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <TheModal />
+      </template>
+
+      <script setup>
+      import TheModal from 'foo'
+      </script>`
+    }
+  ],
+  invalid: [
+    // <script setup>
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import Bar from './Bar.vue'
+      </script>
+
+      <template>
+        <Foo />
+      </template>
+      `,
+      errors: [
+        {
+          message: "The '<Foo>' component has been used, but not defined.",
+          line: 7,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import PascalCase from './component.vue'
+      </script>
+
+      <template>
+        <pascal_case />
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<pascal_case>' component has been used, but not defined.",
+          line: 7,
+          column: 9
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import * as Form from './form-components'
+      </script>
+
+      <template>
+        <Foo.Input />
+      </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<Foo.Input>' component has been used, but not defined.",
+          line: 7,
+          column: 9
+        }
+      ]
+    },
+
+    // options API
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <WarmButton />
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ],
+      errors: [
+        {
+          message:
+            "The '<WarmButton>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent>
+            Some text
+          </CustomComponent>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <WarmButton>
+            Some text
+          </WarmButton>
+        </template>
+      `,
+      options: [
+        {
+          ignorePatterns: ['custom(\\-\\w+)+']
+        }
+      ],
+      errors: [
+        {
+          message:
+            "The '<WarmButton>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          components: {
+            WarmButton
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent>
+            Some text
+          </CustomComponent>
+        </template>
+        <script>
+        export default {
+          components: {
+            WarmButton
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'" />
+        </template>
+        <script>
+        export default {
+          components: {
+            WarmButton
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <component :is="'CustomComponent'">
+            Some text
+          </component>
+        </template>
+        <script>
+        export default {
+          components: {
+            WarmButton
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          components: {
+            'custom-component': InfoPrimaryWrapper
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponent />
+        </template>
+        <script>
+        export default {
+          name: CustomComponent
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponent>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <CustomComponentWithNamedSlots>
+            <template #slotA>
+              <div>Text</div>
+            </template>
+          </CustomComponentWithNamedSlots>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            "The '<CustomComponentWithNamedSlots>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div is="vue:foo" />
+        </template>
+        <script>
+        export default {
+          components: {
+            bar
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message: "The '<foo>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-is="'foo'" />
+        </template>
+        <script>
+        export default {
+          components: {
+            bar
+          }
+        }
+        </script>
+      `,
+      errors: [
+        {
+          message: "The '<foo>' component has been used, but not defined.",
+          line: 3
+        }
+      ]
+    }
+  ]
+})

From 669412c9c359aedeab25d78993333012134aa902 Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 18:56:37 +0900
Subject: [PATCH 4/7] update doc

---
 docs/rules/no-undef-components.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
index ac57942c5..9390c3859 100644
--- a/docs/rules/no-undef-components.md
+++ b/docs/rules/no-undef-components.md
@@ -12,8 +12,6 @@ description: disallow use of undefined components in `<template>`
 
 ## :book: Rule Details
 
-This rule warns that the component used in the `<template>` is not defined in `<script setup>`.  
-
 This rule reports components that haven't been defined and are being used in the `<template>`.
 
 Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.

From d9a8785fa2aade57828f564a1198e811239fbd75 Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 18:57:58 +0900
Subject: [PATCH 5/7] update doc

---
 docs/rules/no-undef-components.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
index 9390c3859..924c5f524 100644
--- a/docs/rules/no-undef-components.md
+++ b/docs/rules/no-undef-components.md
@@ -172,7 +172,6 @@ export default {
 
 ## :couple: Related Rules
 
-- [vue/no-unregistered-components](./no-unregistered-components.md)
 - [vue/no-undef-properties](./no-undef-properties.md)
 
 ## :mag: Implementation

From 63add5e778536b5041cba323a9238e398cf0c08e Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 18:58:54 +0900
Subject: [PATCH 6/7] fix doc

---
 docs/rules/no-undef-components.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
index 924c5f524..ad6812323 100644
--- a/docs/rules/no-undef-components.md
+++ b/docs/rules/no-undef-components.md
@@ -126,7 +126,7 @@ export default {
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/no-unbdef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -148,7 +148,7 @@ export default {
 
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/no-unbdef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
+<eslint-code-block :rules="{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\\-\\w+)+'] }]}">
 
 ```vue
 <!-- ✗ BAD -->

From 0c4c48c99429a914dbb268fcf280b1a1159ee219 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 19 Jan 2022 19:32:07 +0900
Subject: [PATCH 7/7] Update docs/rules/no-undef-components.md

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/rules/no-undef-components.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/rules/no-undef-components.md b/docs/rules/no-undef-components.md
index ad6812323..b4f757505 100644
--- a/docs/rules/no-undef-components.md
+++ b/docs/rules/no-undef-components.md
@@ -10,9 +10,7 @@ description: disallow use of undefined components in `<template>`
 
 - :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 reports components that haven't been defined and are being used in the `<template>`.
+This rule warns reports component that are used in the `<template>`, but that are not defined in the `<script setup>` or the Options API's `components` section.
 
 Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.