From fd7589347f8b19e129670851c8b9d89c1613c4d4 Mon Sep 17 00:00:00 2001
From: KG <38478672+thesheppard@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:14:14 +0200
Subject: [PATCH 1/2] feat: add prefer-define-component rule

---
 lib/rules/prefer-define-component.js       | 114 ++++++++++
 tests/lib/rules/prefer-define-component.js | 229 +++++++++++++++++++++
 2 files changed, 343 insertions(+)
 create mode 100644 lib/rules/prefer-define-component.js
 create mode 100644 tests/lib/rules/prefer-define-component.js

diff --git a/lib/rules/prefer-define-component.js b/lib/rules/prefer-define-component.js
new file mode 100644
index 000000000..7927de0ce
--- /dev/null
+++ b/lib/rules/prefer-define-component.js
@@ -0,0 +1,114 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// @ts-nocheck
+const utils = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'require components to be defined using `defineComponent`',
+      categories: ['vue3-recommended', 'vue2-recommended'],
+      url: 'https://eslint.vuejs.org/rules/prefer-define-component.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      'prefer-define-component': 'Use `defineComponent` to define a component.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const filePath = context.getFilename()
+    if (!utils.isVueFile(filePath)) return {}
+
+    const sourceCode = context.getSourceCode()
+    const documentFragment = sourceCode.parserServices.getDocumentFragment?.()
+
+    // Check if there's a non-setup script tag
+    const hasNormalScript =
+      documentFragment &&
+      documentFragment.children.some(
+        (e) =>
+          utils.isVElement(e) &&
+          e.name === 'script' &&
+          (!e.startTag.attributes ||
+            !e.startTag.attributes.some((attr) => attr.key.name === 'setup'))
+      )
+
+    // If no regular script tag, we don't need to check
+    if (!hasNormalScript) return {}
+
+    // Skip checking if there's only a setup script (no normal script)
+    if (utils.isScriptSetup(context) && !hasNormalScript) return {}
+
+    let hasDefineComponent = false
+    /** @type {ExportDefaultDeclaration | null} */
+    let exportDefaultNode = null
+    let hasVueExtend = false
+
+    return utils.compositingVisitors(utils.defineVueVisitor(context, {}), {
+      /** @param {ExportDefaultDeclaration} node */
+      'Program > ExportDefaultDeclaration'(node) {
+        exportDefaultNode = node
+      },
+
+      /** @param {CallExpression} node */
+      'Program > ExportDefaultDeclaration > CallExpression'(node) {
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'defineComponent'
+        ) {
+          hasDefineComponent = true
+          return
+        }
+
+        // Support aliased imports
+        if (node.callee.type === 'Identifier') {
+          const variable = utils.findVariableByIdentifier(context, node.callee)
+          if (
+            variable &&
+            variable.defs &&
+            variable.defs.length > 0 &&
+            variable.defs[0].node.type === 'ImportSpecifier' &&
+            variable.defs[0].node.imported &&
+            variable.defs[0].node.imported.name === 'defineComponent'
+          ) {
+            hasDefineComponent = true
+            return
+          }
+        }
+
+        // Check for Vue.extend case
+        if (
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object &&
+          node.callee.object.type === 'Identifier' &&
+          node.callee.object.name === 'Vue' &&
+          node.callee.property &&
+          node.callee.property.type === 'Identifier' &&
+          node.callee.property.name === 'extend'
+        ) {
+          hasVueExtend = true
+        }
+      },
+
+      'Program > ExportDefaultDeclaration > ObjectExpression'() {
+        hasDefineComponent = false
+      },
+
+      'Program:exit'() {
+        if (exportDefaultNode && (hasVueExtend || !hasDefineComponent)) {
+          context.report({
+            node: exportDefaultNode,
+            messageId: 'prefer-define-component'
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/prefer-define-component.js b/tests/lib/rules/prefer-define-component.js
new file mode 100644
index 000000000..800c561c8
--- /dev/null
+++ b/tests/lib/rules/prefer-define-component.js
@@ -0,0 +1,229 @@
+/**
+ * @author Kamogelo Moalusi <github.com/thesheppard>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/prefer-define-component')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('prefer-define-component', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default defineComponent({
+        name: 'Test',
+      })
+      </script> 
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineComponent } from 'vue'
+      export default defineComponent({
+        name: 'Test',
+        inheritAttrs: false
+      })
+      </script>
+      <script setup>
+      import { ref } from 'vue'
+      const count = ref(0)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      import { defineComponent } from 'vue'
+      export default defineComponent({
+        name: 'Test',
+        inheritAttrs: false,
+        props: {
+          message: {
+            type: String,
+            required: true
+          }
+        }
+      })
+      </script>
+      <script setup lang="ts">
+      import { ref, computed } from 'vue'
+      const count = ref<number>(0)
+      const doubled = computed<number>(() => count.value * 2)
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      import { defineComponent as createComponent } from 'vue'
+      export default createComponent({
+        name: 'Test',
+      })
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default defineComponent({
+        name: 'GloballyAvailable',
+        setup(props) {
+          return {
+            message: 'Hello World'
+          }
+        }
+      })
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script lang="ts">
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default Vue.extend({
+        name: 'Test',
+      })
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default {
+        name: 'Test',
+        inheritAttrs: false
+      }
+      </script>
+      <script setup>
+      import { ref } from 'vue'
+      const count = ref(0)
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      const obj = { foo: 'bar' }
+      export const helpers = { 
+        method() { return 'helper' } 
+      }
+      export default {
+        name: 'Test',
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 7,
+          column: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+      export default Vue.extend({
+        name: 'Test',
+        data() {
+          return { count: 0 }
+        }
+      })
+      </script>
+      <script setup>
+      import { computed } from 'vue'
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineComponent` to define a component.',
+          line: 3,
+          column: 7
+        }
+      ]
+    }
+  ]
+})

From 58343cbedb46e0a9e87b1186f2a12b3971c0b031 Mon Sep 17 00:00:00 2001
From: KG <38478672+thesheppard@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:16:01 +0200
Subject: [PATCH 2/2] docs: update docs

---
 docs/rules/index.md                   | 552 +++++++++++++-------------
 docs/rules/prefer-define-component.md |  96 +++++
 lib/index.js                          |   1 +
 lib/rules/prefer-define-component.js  |   2 +-
 4 files changed, 375 insertions(+), 276 deletions(-)
 create mode 100644 docs/rules/prefer-define-component.md

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 55c5b96c9..47d88ff33 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -8,9 +8,9 @@ pageClass: rule-list
 <!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
 
 ::: tip Legend
-  :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the reported problems.
+:wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the reported problems.
 
-  :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+:bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
 Mark indicating rule type:
@@ -25,10 +25,10 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/comment-directive] | support comment-directives in `<template>` |  | :warning: |
-| [vue/jsx-uses-vars] | prevent variables used in JSX to be marked as unused |  | :warning: |
+| Rule ID                 | Description                                          |     |           |
+| :---------------------- | :--------------------------------------------------- | :-: | :-------: |
+| [vue/comment-directive] | support comment-directives in `<template>`           |     | :warning: |
+| [vue/jsx-uses-vars]     | prevent variables used in JSX to be marked as unused |     | :warning: |
 
 </rules-table>
 
@@ -39,97 +39,97 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/multi-word-component-names] | require component names to be always multi-word |  | :three::two::hammer: |
-| [vue/no-arrow-functions-in-watch] | disallow using arrow functions to define watcher |  | :three::two::warning: |
-| [vue/no-async-in-computed-properties] | disallow asynchronous actions in computed properties |  | :three::two::warning: |
-| [vue/no-child-content] | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :three::two::warning: |
-| [vue/no-computed-properties-in-data] | disallow accessing computed properties in `data` |  | :three::two::warning: |
-| [vue/no-custom-modifiers-on-v-model] | disallow custom modifiers on v-model used on the component |  | :two::warning: |
-| [vue/no-deprecated-data-object-declaration] | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
-| [vue/no-deprecated-delete-set] | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-destroyed-lifecycle] | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
-| [vue/no-deprecated-dollar-listeners-api] | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-dollar-scopedslots-api] | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
-| [vue/no-deprecated-events-api] | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-filter] | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-functional-template] | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-html-element-is] | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-inline-template] | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-model-definition] | disallow deprecated `model` definition (in Vue.js 3.0.0+) | :bulb: | :three::warning: |
-| [vue/no-deprecated-props-default-this] | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-router-link-tag-prop] | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-scope-attribute] | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :three::hammer: |
-| [vue/no-deprecated-slot-attribute] | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
-| [vue/no-deprecated-slot-scope-attribute] | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
-| [vue/no-deprecated-v-bind-sync] | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
-| [vue/no-deprecated-v-is] | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) |  | :three::hammer: |
-| [vue/no-deprecated-v-on-native-modifier] | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-deprecated-v-on-number-modifiers] | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
-| [vue/no-deprecated-vue-config-keycodes] | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :three::warning: |
-| [vue/no-dupe-keys] | disallow duplication of field names |  | :three::two::warning: |
-| [vue/no-dupe-v-else-if] | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :three::two::warning: |
-| [vue/no-duplicate-attributes] | disallow duplication of attributes |  | :three::two::warning: |
-| [vue/no-export-in-script-setup] | disallow `export` in `<script setup>` |  | :three::two::warning: |
-| [vue/no-expose-after-await] | disallow asynchronously registered `expose` |  | :three::warning: |
-| [vue/no-lifecycle-after-await] | disallow asynchronously registered lifecycle hooks |  | :three::hammer: |
-| [vue/no-multiple-template-root] | disallow adding multiple root nodes to the template |  | :two::warning: |
-| [vue/no-mutating-props] | disallow mutation of component props |  | :three::two::hammer: |
-| [vue/no-parsing-error] | disallow parsing errors in `<template>` |  | :three::two::warning: |
-| [vue/no-ref-as-operand] | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :three::two::hammer: |
-| [vue/no-reserved-component-names] | disallow the use of reserved names in component definitions |  | :three::two::hammer: |
-| [vue/no-reserved-keys] | disallow overwriting reserved keys |  | :three::two::hammer: |
-| [vue/no-reserved-props] | disallow reserved names in props |  | :three::two::warning: |
-| [vue/no-shared-component-data] | enforce component's data property to be a function | :wrench: | :three::two::warning: |
-| [vue/no-side-effects-in-computed-properties] | disallow side effects in computed properties |  | :three::two::warning: |
-| [vue/no-template-key] | disallow `key` attribute on `<template>` |  | :three::two::warning: |
-| [vue/no-textarea-mustache] | disallow mustaches in `<textarea>` |  | :three::two::warning: |
-| [vue/no-unused-components] | disallow registering components that are not used inside templates |  | :three::two::hammer: |
-| [vue/no-unused-vars] | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :three::two::hammer: |
-| [vue/no-use-computed-property-like-method] | disallow use computed property like method |  | :three::two::warning: |
-| [vue/no-use-v-if-with-v-for] | disallow using `v-if` on the same element as `v-for` |  | :three::two::hammer: |
-| [vue/no-useless-template-attributes] | disallow useless attribute on `<template>` |  | :three::two::warning: |
-| [vue/no-v-for-template-key-on-child] | disallow key of `<template v-for>` placed on child elements |  | :three::warning: |
-| [vue/no-v-for-template-key] | disallow `key` attribute on `<template v-for>` | :no_entry_sign: | :two::warning: |
-| [vue/no-v-model-argument] | disallow adding an argument to `v-model` used in custom component | :no_entry_sign: | :two::warning: |
-| [vue/no-v-text-v-html-on-component] | disallow v-text / v-html on component |  | :three::two::warning: |
-| [vue/no-watch-after-await] | disallow asynchronously registered `watch` |  | :three::hammer: |
-| [vue/prefer-import-from-vue] | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :three::hammer: |
-| [vue/require-component-is] | require `v-bind:is` of `<component>` elements |  | :three::two::warning: |
-| [vue/require-prop-type-constructor] | require prop type to be a constructor | :wrench: | :three::two::hammer: |
-| [vue/require-render-return] | enforce render function to always return value |  | :three::two::warning: |
-| [vue/require-slots-as-functions] | enforce properties of `$slots` to be used as a function |  | :three::warning: |
-| [vue/require-toggle-inside-transition] | require control the display of the content inside `<transition>` |  | :three::warning: |
-| [vue/require-v-for-key] | require `v-bind:key` with `v-for` directives |  | :three::two::warning: |
-| [vue/require-valid-default-prop] | enforce props default values to be valid |  | :three::two::hammer: |
-| [vue/return-in-computed-property] | enforce that a return statement is present in computed property |  | :three::two::warning: |
-| [vue/return-in-emits-validator] | enforce that a return statement is present in emits validator |  | :three::two::warning: |
-| [vue/use-v-on-exact] | enforce usage of `exact` modifier on `v-on` |  | :three::two::hammer: |
-| [vue/valid-attribute-name] | require valid attribute names |  | :three::two::warning: |
-| [vue/valid-define-emits] | enforce valid `defineEmits` compiler macro |  | :three::two::warning: |
-| [vue/valid-define-options] | enforce valid `defineOptions` compiler macro |  | :three::warning: |
-| [vue/valid-define-props] | enforce valid `defineProps` compiler macro |  | :three::two::warning: |
-| [vue/valid-model-definition] | require valid keys in model option | :no_entry_sign: | :two::warning: |
-| [vue/valid-next-tick] | enforce valid `nextTick` function calls | :wrench::bulb: | :three::two::warning: |
-| [vue/valid-template-root] | enforce valid template root |  | :three::two::warning: |
-| [vue/valid-v-bind-sync] | enforce valid `.sync` modifier on `v-bind` directives | :no_entry_sign: | :two::warning: |
-| [vue/valid-v-bind] | enforce valid `v-bind` directives |  | :three::two::warning: |
-| [vue/valid-v-cloak] | enforce valid `v-cloak` directives |  | :three::two::warning: |
-| [vue/valid-v-else-if] | enforce valid `v-else-if` directives |  | :three::two::warning: |
-| [vue/valid-v-else] | enforce valid `v-else` directives |  | :three::two::warning: |
-| [vue/valid-v-for] | enforce valid `v-for` directives |  | :three::two::warning: |
-| [vue/valid-v-html] | enforce valid `v-html` directives |  | :three::two::warning: |
-| [vue/valid-v-if] | enforce valid `v-if` directives |  | :three::two::warning: |
-| [vue/valid-v-is] | enforce valid `v-is` directives |  | :three::warning: |
-| [vue/valid-v-memo] | enforce valid `v-memo` directives |  | :three::warning: |
-| [vue/valid-v-model] | enforce valid `v-model` directives |  | :three::two::warning: |
-| [vue/valid-v-on] | enforce valid `v-on` directives |  | :three::two::warning: |
-| [vue/valid-v-once] | enforce valid `v-once` directives |  | :three::two::warning: |
-| [vue/valid-v-pre] | enforce valid `v-pre` directives |  | :three::two::warning: |
-| [vue/valid-v-show] | enforce valid `v-show` directives |  | :three::two::warning: |
-| [vue/valid-v-slot] | enforce valid `v-slot` directives |  | :three::two::warning: |
-| [vue/valid-v-text] | enforce valid `v-text` directives |  | :three::two::warning: |
+| Rule ID                                      | Description                                                                                           |                 |                       |
+| :------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :-------------: | :-------------------: |
+| [vue/multi-word-component-names]             | require component names to be always multi-word                                                       |                 | :three::two::hammer:  |
+| [vue/no-arrow-functions-in-watch]            | disallow using arrow functions to define watcher                                                      |                 | :three::two::warning: |
+| [vue/no-async-in-computed-properties]        | disallow asynchronous actions in computed properties                                                  |                 | :three::two::warning: |
+| [vue/no-child-content]                       | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` |     :bulb:      | :three::two::warning: |
+| [vue/no-computed-properties-in-data]         | disallow accessing computed properties in `data`                                                      |                 | :three::two::warning: |
+| [vue/no-custom-modifiers-on-v-model]         | disallow custom modifiers on v-model used on the component                                            |                 |    :two::warning:     |
+| [vue/no-deprecated-data-object-declaration]  | disallow using deprecated object declaration on data (in Vue.js 3.0.0+)                               |    :wrench:     |   :three::warning:    |
+| [vue/no-deprecated-delete-set]               | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)                                     |                 |   :three::warning:    |
+| [vue/no-deprecated-destroyed-lifecycle]      | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)          |    :wrench:     |   :three::warning:    |
+| [vue/no-deprecated-dollar-listeners-api]     | disallow using deprecated `$listeners` (in Vue.js 3.0.0+)                                             |                 |   :three::warning:    |
+| [vue/no-deprecated-dollar-scopedslots-api]   | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)                                           |    :wrench:     |   :three::warning:    |
+| [vue/no-deprecated-events-api]               | disallow using deprecated events api (in Vue.js 3.0.0+)                                               |                 |   :three::warning:    |
+| [vue/no-deprecated-filter]                   | disallow using deprecated filters syntax (in Vue.js 3.0.0+)                                           |                 |   :three::warning:    |
+| [vue/no-deprecated-functional-template]      | disallow using deprecated the `functional` template (in Vue.js 3.0.0+)                                |                 |   :three::warning:    |
+| [vue/no-deprecated-html-element-is]          | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)                      |                 |   :three::warning:    |
+| [vue/no-deprecated-inline-template]          | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)                              |                 |   :three::warning:    |
+| [vue/no-deprecated-model-definition]         | disallow deprecated `model` definition (in Vue.js 3.0.0+)                                             |     :bulb:      |   :three::warning:    |
+| [vue/no-deprecated-props-default-this]       | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)                        |                 |   :three::warning:    |
+| [vue/no-deprecated-router-link-tag-prop]     | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)                           |                 |   :three::warning:    |
+| [vue/no-deprecated-scope-attribute]          | disallow deprecated `scope` attribute (in Vue.js 2.5.0+)                                              |    :wrench:     |    :three::hammer:    |
+| [vue/no-deprecated-slot-attribute]           | disallow deprecated `slot` attribute (in Vue.js 2.6.0+)                                               |    :wrench:     |    :three::hammer:    |
+| [vue/no-deprecated-slot-scope-attribute]     | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)                                         |    :wrench:     |    :three::hammer:    |
+| [vue/no-deprecated-v-bind-sync]              | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)                  |    :wrench:     |   :three::warning:    |
+| [vue/no-deprecated-v-is]                     | disallow deprecated `v-is` directive (in Vue.js 3.1.0+)                                               |                 |    :three::hammer:    |
+| [vue/no-deprecated-v-on-native-modifier]     | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)                                      |                 |   :three::warning:    |
+| [vue/no-deprecated-v-on-number-modifiers]    | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)                               |    :wrench:     |   :three::warning:    |
+| [vue/no-deprecated-vue-config-keycodes]      | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)                                    |                 |   :three::warning:    |
+| [vue/no-dupe-keys]                           | disallow duplication of field names                                                                   |                 | :three::two::warning: |
+| [vue/no-dupe-v-else-if]                      | disallow duplicate conditions in `v-if` / `v-else-if` chains                                          |                 | :three::two::warning: |
+| [vue/no-duplicate-attributes]                | disallow duplication of attributes                                                                    |                 | :three::two::warning: |
+| [vue/no-export-in-script-setup]              | disallow `export` in `<script setup>`                                                                 |                 | :three::two::warning: |
+| [vue/no-expose-after-await]                  | disallow asynchronously registered `expose`                                                           |                 |   :three::warning:    |
+| [vue/no-lifecycle-after-await]               | disallow asynchronously registered lifecycle hooks                                                    |                 |    :three::hammer:    |
+| [vue/no-multiple-template-root]              | disallow adding multiple root nodes to the template                                                   |                 |    :two::warning:     |
+| [vue/no-mutating-props]                      | disallow mutation of component props                                                                  |                 | :three::two::hammer:  |
+| [vue/no-parsing-error]                       | disallow parsing errors in `<template>`                                                               |                 | :three::two::warning: |
+| [vue/no-ref-as-operand]                      | disallow use of value wrapped by `ref()` (Composition API) as an operand                              |    :wrench:     | :three::two::hammer:  |
+| [vue/no-reserved-component-names]            | disallow the use of reserved names in component definitions                                           |                 | :three::two::hammer:  |
+| [vue/no-reserved-keys]                       | disallow overwriting reserved keys                                                                    |                 | :three::two::hammer:  |
+| [vue/no-reserved-props]                      | disallow reserved names in props                                                                      |                 | :three::two::warning: |
+| [vue/no-shared-component-data]               | enforce component's data property to be a function                                                    |    :wrench:     | :three::two::warning: |
+| [vue/no-side-effects-in-computed-properties] | disallow side effects in computed properties                                                          |                 | :three::two::warning: |
+| [vue/no-template-key]                        | disallow `key` attribute on `<template>`                                                              |                 | :three::two::warning: |
+| [vue/no-textarea-mustache]                   | disallow mustaches in `<textarea>`                                                                    |                 | :three::two::warning: |
+| [vue/no-unused-components]                   | disallow registering components that are not used inside templates                                    |                 | :three::two::hammer:  |
+| [vue/no-unused-vars]                         | disallow unused variable definitions of v-for directives or scope attributes                          |     :bulb:      | :three::two::hammer:  |
+| [vue/no-use-computed-property-like-method]   | disallow use computed property like method                                                            |                 | :three::two::warning: |
+| [vue/no-use-v-if-with-v-for]                 | disallow using `v-if` on the same element as `v-for`                                                  |                 | :three::two::hammer:  |
+| [vue/no-useless-template-attributes]         | disallow useless attribute on `<template>`                                                            |                 | :three::two::warning: |
+| [vue/no-v-for-template-key-on-child]         | disallow key of `<template v-for>` placed on child elements                                           |                 |   :three::warning:    |
+| [vue/no-v-for-template-key]                  | disallow `key` attribute on `<template v-for>`                                                        | :no_entry_sign: |    :two::warning:     |
+| [vue/no-v-model-argument]                    | disallow adding an argument to `v-model` used in custom component                                     | :no_entry_sign: |    :two::warning:     |
+| [vue/no-v-text-v-html-on-component]          | disallow v-text / v-html on component                                                                 |                 | :three::two::warning: |
+| [vue/no-watch-after-await]                   | disallow asynchronously registered `watch`                                                            |                 |    :three::hammer:    |
+| [vue/prefer-import-from-vue]                 | enforce import from 'vue' instead of import from '@vue/\*'                                            |    :wrench:     |    :three::hammer:    |
+| [vue/require-component-is]                   | require `v-bind:is` of `<component>` elements                                                         |                 | :three::two::warning: |
+| [vue/require-prop-type-constructor]          | require prop type to be a constructor                                                                 |    :wrench:     | :three::two::hammer:  |
+| [vue/require-render-return]                  | enforce render function to always return value                                                        |                 | :three::two::warning: |
+| [vue/require-slots-as-functions]             | enforce properties of `$slots` to be used as a function                                               |                 |   :three::warning:    |
+| [vue/require-toggle-inside-transition]       | require control the display of the content inside `<transition>`                                      |                 |   :three::warning:    |
+| [vue/require-v-for-key]                      | require `v-bind:key` with `v-for` directives                                                          |                 | :three::two::warning: |
+| [vue/require-valid-default-prop]             | enforce props default values to be valid                                                              |                 | :three::two::hammer:  |
+| [vue/return-in-computed-property]            | enforce that a return statement is present in computed property                                       |                 | :three::two::warning: |
+| [vue/return-in-emits-validator]              | enforce that a return statement is present in emits validator                                         |                 | :three::two::warning: |
+| [vue/use-v-on-exact]                         | enforce usage of `exact` modifier on `v-on`                                                           |                 | :three::two::hammer:  |
+| [vue/valid-attribute-name]                   | require valid attribute names                                                                         |                 | :three::two::warning: |
+| [vue/valid-define-emits]                     | enforce valid `defineEmits` compiler macro                                                            |                 | :three::two::warning: |
+| [vue/valid-define-options]                   | enforce valid `defineOptions` compiler macro                                                          |                 |   :three::warning:    |
+| [vue/valid-define-props]                     | enforce valid `defineProps` compiler macro                                                            |                 | :three::two::warning: |
+| [vue/valid-model-definition]                 | require valid keys in model option                                                                    | :no_entry_sign: |    :two::warning:     |
+| [vue/valid-next-tick]                        | enforce valid `nextTick` function calls                                                               | :wrench::bulb:  | :three::two::warning: |
+| [vue/valid-template-root]                    | enforce valid template root                                                                           |                 | :three::two::warning: |
+| [vue/valid-v-bind-sync]                      | enforce valid `.sync` modifier on `v-bind` directives                                                 | :no_entry_sign: |    :two::warning:     |
+| [vue/valid-v-bind]                           | enforce valid `v-bind` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-cloak]                          | enforce valid `v-cloak` directives                                                                    |                 | :three::two::warning: |
+| [vue/valid-v-else-if]                        | enforce valid `v-else-if` directives                                                                  |                 | :three::two::warning: |
+| [vue/valid-v-else]                           | enforce valid `v-else` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-for]                            | enforce valid `v-for` directives                                                                      |                 | :three::two::warning: |
+| [vue/valid-v-html]                           | enforce valid `v-html` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-if]                             | enforce valid `v-if` directives                                                                       |                 | :three::two::warning: |
+| [vue/valid-v-is]                             | enforce valid `v-is` directives                                                                       |                 |   :three::warning:    |
+| [vue/valid-v-memo]                           | enforce valid `v-memo` directives                                                                     |                 |   :three::warning:    |
+| [vue/valid-v-model]                          | enforce valid `v-model` directives                                                                    |                 | :three::two::warning: |
+| [vue/valid-v-on]                             | enforce valid `v-on` directives                                                                       |                 | :three::two::warning: |
+| [vue/valid-v-once]                           | enforce valid `v-once` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-pre]                            | enforce valid `v-pre` directives                                                                      |                 | :three::two::warning: |
+| [vue/valid-v-show]                           | enforce valid `v-show` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-slot]                           | enforce valid `v-slot` directives                                                                     |                 | :three::two::warning: |
+| [vue/valid-v-text]                           | enforce valid `v-text` directives                                                                     |                 | :three::two::warning: |
 
 </rules-table>
 
@@ -140,33 +140,33 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/attribute-hyphenation] | enforce attribute naming style on custom components in template | :wrench: | :three::two::hammer: |
-| [vue/component-definition-name-casing] | enforce specific casing for component definition name | :wrench: | :three::two::hammer: |
-| [vue/first-attribute-linebreak] | enforce the location of first attribute | :wrench: | :three::two::lipstick: |
-| [vue/html-closing-bracket-newline] | require or disallow a line break before tag's closing brackets | :wrench: | :three::two::lipstick: |
-| [vue/html-closing-bracket-spacing] | require or disallow a space before tag's closing brackets | :wrench: | :three::two::lipstick: |
-| [vue/html-end-tags] | enforce end tag style | :wrench: | :three::two::hammer: |
-| [vue/html-indent] | enforce consistent indentation in `<template>` | :wrench: | :three::two::lipstick: |
-| [vue/html-quotes] | enforce quotes style of HTML attributes | :wrench: | :three::two::lipstick: |
-| [vue/html-self-closing] | enforce self-closing style | :wrench: | :three::two::lipstick: |
-| [vue/max-attributes-per-line] | enforce the maximum number of attributes per line | :wrench: | :three::two::lipstick: |
-| [vue/multiline-html-element-content-newline] | require a line break before and after the contents of a multiline element | :wrench: | :three::two::lipstick: |
-| [vue/mustache-interpolation-spacing] | enforce unified spacing in mustache interpolations | :wrench: | :three::two::lipstick: |
-| [vue/no-multi-spaces] | disallow multiple spaces | :wrench: | :three::two::lipstick: |
-| [vue/no-spaces-around-equal-signs-in-attribute] | disallow spaces around equal signs in attribute | :wrench: | :three::two::lipstick: |
-| [vue/no-template-shadow] | disallow variable declarations from shadowing variables declared in the outer scope |  | :three::two::hammer: |
-| [vue/one-component-per-file] | enforce that each component should be in its own file |  | :three::two::hammer: |
-| [vue/prop-name-casing] | enforce specific casing for the Prop name in Vue components |  | :three::two::hammer: |
-| [vue/require-default-prop] | require default value for props |  | :three::two::hammer: |
-| [vue/require-explicit-emits] | require `emits` option with name triggered by `$emit()` | :bulb: | :three::hammer: |
-| [vue/require-prop-types] | require type definitions in props |  | :three::two::hammer: |
-| [vue/singleline-html-element-content-newline] | require a line break before and after the contents of a singleline element | :wrench: | :three::two::lipstick: |
-| [vue/v-bind-style] | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
-| [vue/v-on-event-hyphenation] | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
-| [vue/v-on-style] | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
-| [vue/v-slot-style] | enforce `v-slot` directive style | :wrench: | :three::two::hammer: |
+| Rule ID                                         | Description                                                                         |          |                        |
+| :---------------------------------------------- | :---------------------------------------------------------------------------------- | :------: | :--------------------: |
+| [vue/attribute-hyphenation]                     | enforce attribute naming style on custom components in template                     | :wrench: |  :three::two::hammer:  |
+| [vue/component-definition-name-casing]          | enforce specific casing for component definition name                               | :wrench: |  :three::two::hammer:  |
+| [vue/first-attribute-linebreak]                 | enforce the location of first attribute                                             | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-newline]              | require or disallow a line break before tag's closing brackets                      | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-spacing]              | require or disallow a space before tag's closing brackets                           | :wrench: | :three::two::lipstick: |
+| [vue/html-end-tags]                             | enforce end tag style                                                               | :wrench: |  :three::two::hammer:  |
+| [vue/html-indent]                               | enforce consistent indentation in `<template>`                                      | :wrench: | :three::two::lipstick: |
+| [vue/html-quotes]                               | enforce quotes style of HTML attributes                                             | :wrench: | :three::two::lipstick: |
+| [vue/html-self-closing]                         | enforce self-closing style                                                          | :wrench: | :three::two::lipstick: |
+| [vue/max-attributes-per-line]                   | enforce the maximum number of attributes per line                                   | :wrench: | :three::two::lipstick: |
+| [vue/multiline-html-element-content-newline]    | require a line break before and after the contents of a multiline element           | :wrench: | :three::two::lipstick: |
+| [vue/mustache-interpolation-spacing]            | enforce unified spacing in mustache interpolations                                  | :wrench: | :three::two::lipstick: |
+| [vue/no-multi-spaces]                           | disallow multiple spaces                                                            | :wrench: | :three::two::lipstick: |
+| [vue/no-spaces-around-equal-signs-in-attribute] | disallow spaces around equal signs in attribute                                     | :wrench: | :three::two::lipstick: |
+| [vue/no-template-shadow]                        | disallow variable declarations from shadowing variables declared in the outer scope |          |  :three::two::hammer:  |
+| [vue/one-component-per-file]                    | enforce that each component should be in its own file                               |          |  :three::two::hammer:  |
+| [vue/prop-name-casing]                          | enforce specific casing for the Prop name in Vue components                         |          |  :three::two::hammer:  |
+| [vue/require-default-prop]                      | require default value for props                                                     |          |  :three::two::hammer:  |
+| [vue/require-explicit-emits]                    | require `emits` option with name triggered by `$emit()`                             |  :bulb:  |    :three::hammer:     |
+| [vue/require-prop-types]                        | require type definitions in props                                                   |          |  :three::two::hammer:  |
+| [vue/singleline-html-element-content-newline]   | require a line break before and after the contents of a singleline element          | :wrench: | :three::two::lipstick: |
+| [vue/v-bind-style]                              | enforce `v-bind` directive style                                                    | :wrench: |  :three::two::hammer:  |
+| [vue/v-on-event-hyphenation]                    | enforce v-on event naming style on custom components in template                    | :wrench: |    :three::hammer:     |
+| [vue/v-on-style]                                | enforce `v-on` directive style                                                      | :wrench: |  :three::two::hammer:  |
+| [vue/v-slot-style]                              | enforce `v-slot` directive style                                                    | :wrench: |  :three::two::hammer:  |
 
 </rules-table>
 
@@ -177,16 +177,17 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/attributes-order] | enforce order of attributes | :wrench: | :three::two::hammer: |
-| [vue/block-order] | enforce order of component top-level elements | :wrench: | :three::two::hammer: |
-| [vue/no-lone-template] | disallow unnecessary `<template>` |  | :three::two::warning: |
-| [vue/no-multiple-slot-args] | disallow passing multiple arguments to scoped slots |  | :three::two::warning: |
-| [vue/no-required-prop-with-default] | enforce props with default values to be optional | :wrench::bulb: | :three::two::warning: |
-| [vue/no-v-html] | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
-| [vue/order-in-components] | enforce order of properties in components | :wrench::bulb: | :three::two::hammer: |
-| [vue/this-in-template] | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
+| Rule ID                             | Description                                              |                |                       |
+| :---------------------------------- | :------------------------------------------------------- | :------------: | :-------------------: |
+| [vue/attributes-order]              | enforce order of attributes                              |    :wrench:    | :three::two::hammer:  |
+| [vue/block-order]                   | enforce order of component top-level elements            |    :wrench:    | :three::two::hammer:  |
+| [vue/no-lone-template]              | disallow unnecessary `<template>`                        |                | :three::two::warning: |
+| [vue/no-multiple-slot-args]         | disallow passing multiple arguments to scoped slots      |                | :three::two::warning: |
+| [vue/no-required-prop-with-default] | enforce props with default values to be optional         | :wrench::bulb: | :three::two::warning: |
+| [vue/no-v-html]                     | disallow use of v-html to prevent XSS attack             |                | :three::two::hammer:  |
+| [vue/order-in-components]           | enforce order of properties in components                | :wrench::bulb: | :three::two::hammer:  |
+| [vue/prefer-define-component]       | enforce components to be defined using `defineComponent` |    :wrench:    | :three::two::hammer:  |
+| [vue/this-in-template]              | disallow usage of `this` in template                     |    :wrench:    | :three::two::hammer:  |
 
 </rules-table>
 
@@ -207,89 +208,89 @@ For example:
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/block-lang] | disallow use other than available `lang` |  | :hammer: |
-| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
-| [vue/component-api-style] | enforce component API style |  | :hammer: |
-| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
-| [vue/component-options-name-casing] | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
-| [vue/custom-event-name-casing] | enforce specific casing for custom event name |  | :hammer: |
-| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` |  | :hammer: |
-| [vue/define-macros-order] | enforce order of compiler macros (`defineProps`, `defineEmits`, etc.) | :wrench::bulb: | :lipstick: |
-| [vue/define-props-declaration] | enforce declaration style of `defineProps` |  | :hammer: |
-| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |  | :hammer: |
-| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute |  | :hammer: |
-| [vue/html-comment-content-newline] | enforce unified line break in HTML comments | :wrench: | :lipstick: |
-| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
-| [vue/html-comment-indent] | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
-| [vue/match-component-file-name] | require component name property to match its file name | :bulb: | :hammer: |
-| [vue/match-component-import-name] | require the registered component name to match the imported component name |  | :warning: |
-| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks |  | :warning: |
-| [vue/max-props] | enforce maximum number of props in Vue component |  | :warning: |
-| [vue/max-template-depth] | enforce maximum depth of template |  | :warning: |
-| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
-| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
-| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |  | :hammer: |
-| [vue/no-boolean-default] | disallow boolean defaults |  | :hammer: |
-| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
-| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
-| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
-| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |  | :hammer: |
-| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
-| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity |  | :warning: |
-| [vue/no-restricted-block] | disallow specific block |  | :hammer: |
-| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods |  | :hammer: |
-| [vue/no-restricted-class] | disallow specific classes in Vue components |  | :warning: |
-| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
-| [vue/no-restricted-component-options] | disallow specific component option |  | :hammer: |
-| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
-| [vue/no-restricted-html-elements] | disallow specific HTML elements |  | :hammer: |
-| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
-| [vue/no-restricted-static-attribute] | disallow specific attribute |  | :hammer: |
-| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` |  | :hammer: |
-| [vue/no-restricted-v-on] | disallow specific argument in `v-on` |  | :hammer: |
-| [vue/no-root-v-if] | disallow `v-if` directives on root element |  | :hammer: |
-| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` |  | :hammer: |
-| [vue/no-static-inline-styles] | disallow static inline `style` attributes |  | :hammer: |
-| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
-| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
-| [vue/no-undef-components] | disallow use of undefined components in `<template>` |  | :hammer: |
-| [vue/no-undef-properties] | disallow undefined properties |  | :hammer: |
-| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
-| [vue/no-unused-emit-declarations] | disallow unused emit declarations |  | :hammer: |
-| [vue/no-unused-properties] | disallow unused properties |  | :hammer: |
-| [vue/no-unused-refs] | disallow unused refs |  | :hammer: |
-| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` |  | :hammer: |
-| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
-| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
-| [vue/no-v-text] | disallow use of v-text |  | :hammer: |
-| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks | :wrench: | :lipstick: |
-| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
-| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition | :wrench: | :lipstick: |
-| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export | :wrench: | :hammer: |
-| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
-| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
-| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
-| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |  | :hammer: |
-| [vue/require-default-export] | require components to be the default export |  | :warning: |
-| [vue/require-direct-export] | require the component to be directly exported |  | :hammer: |
-| [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
-| [vue/require-explicit-slots] | require slots to be explicitly defined |  | :warning: |
-| [vue/require-expose] | require declare public properties using `expose` | :bulb: | :hammer: |
-| [vue/require-macro-variable-name] | require a certain macro variable name | :bulb: | :hammer: |
-| [vue/require-name-property] | require a name property in Vue components | :bulb: | :hammer: |
-| [vue/require-prop-comment] | require props to have a comment |  | :hammer: |
-| [vue/require-typed-object-prop] | enforce adding type declarations to object props | :bulb: | :hammer: |
-| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed |  | :hammer: |
-| [vue/restricted-component-names] | enforce using only specific component names |  | :warning: |
-| [vue/script-indent] | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
-| [vue/slot-name-casing] | enforce specific casing for slot names |  | :hammer: |
-| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
-| [vue/static-class-names-order] | enforce static class names order | :wrench: | :hammer: |
-| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
-| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
-| [vue/v-on-handler-style] | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
+| Rule ID                                     | Description                                                                                   |                |            |
+| :------------------------------------------ | :-------------------------------------------------------------------------------------------- | :------------: | :--------: |
+| [vue/block-lang]                            | disallow use other than available `lang`                                                      |                |  :hammer:  |
+| [vue/block-tag-newline]                     | enforce line breaks after opening and before closing block-level tags                         |    :wrench:    | :lipstick: |
+| [vue/component-api-style]                   | enforce component API style                                                                   |                |  :hammer:  |
+| [vue/component-name-in-template-casing]     | enforce specific casing for the component naming style in template                            |    :wrench:    |  :hammer:  |
+| [vue/component-options-name-casing]         | enforce the casing of component name in `components` options                                  | :wrench::bulb: |  :hammer:  |
+| [vue/custom-event-name-casing]              | enforce specific casing for custom event name                                                 |                |  :hammer:  |
+| [vue/define-emits-declaration]              | enforce declaration style of `defineEmits`                                                    |                |  :hammer:  |
+| [vue/define-macros-order]                   | enforce order of compiler macros (`defineProps`, `defineEmits`, etc.)                         | :wrench::bulb: | :lipstick: |
+| [vue/define-props-declaration]              | enforce declaration style of `defineProps`                                                    |                |  :hammer:  |
+| [vue/enforce-style-attribute]               | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |                |  :hammer:  |
+| [vue/html-button-has-type]                  | disallow usage of button without an explicit type attribute                                   |                |  :hammer:  |
+| [vue/html-comment-content-newline]          | enforce unified line break in HTML comments                                                   |    :wrench:    | :lipstick: |
+| [vue/html-comment-content-spacing]          | enforce unified spacing in HTML comments                                                      |    :wrench:    | :lipstick: |
+| [vue/html-comment-indent]                   | enforce consistent indentation in HTML comments                                               |    :wrench:    | :lipstick: |
+| [vue/match-component-file-name]             | require component name property to match its file name                                        |     :bulb:     |  :hammer:  |
+| [vue/match-component-import-name]           | require the registered component name to match the imported component name                    |                | :warning:  |
+| [vue/max-lines-per-block]                   | enforce maximum number of lines in Vue SFC blocks                                             |                | :warning:  |
+| [vue/max-props]                             | enforce maximum number of props in Vue component                                              |                | :warning:  |
+| [vue/max-template-depth]                    | enforce maximum depth of template                                                             |                | :warning:  |
+| [vue/new-line-between-multi-line-property]  | enforce new lines between multi-line properties in Vue components                             |    :wrench:    | :lipstick: |
+| [vue/next-tick-style]                       | enforce Promise or callback style in `nextTick`                                               |    :wrench:    |  :hammer:  |
+| [vue/no-bare-strings-in-template]           | disallow the use of bare strings in `<template>`                                              |                |  :hammer:  |
+| [vue/no-boolean-default]                    | disallow boolean defaults                                                                     |                |  :hammer:  |
+| [vue/no-duplicate-attr-inheritance]         | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`                      |                |  :hammer:  |
+| [vue/no-empty-component-block]              | disallow the `<template>` `<script>` `<style>` block to be empty                              |    :wrench:    |  :hammer:  |
+| [vue/no-import-compiler-macros]             | disallow importing Vue compiler macros                                                        |    :wrench:    | :warning:  |
+| [vue/no-multiple-objects-in-class]          | disallow passing multiple objects in an array to class                                        |                |  :hammer:  |
+| [vue/no-potential-component-option-typo]    | disallow a potential typo in your component property                                          |     :bulb:     |  :hammer:  |
+| [vue/no-ref-object-reactivity-loss]         | disallow usages of ref objects that can lead to loss of reactivity                            |                | :warning:  |
+| [vue/no-restricted-block]                   | disallow specific block                                                                       |                |  :hammer:  |
+| [vue/no-restricted-call-after-await]        | disallow asynchronously called restricted methods                                             |                |  :hammer:  |
+| [vue/no-restricted-class]                   | disallow specific classes in Vue components                                                   |                | :warning:  |
+| [vue/no-restricted-component-names]         | disallow specific component names                                                             |     :bulb:     |  :hammer:  |
+| [vue/no-restricted-component-options]       | disallow specific component option                                                            |                |  :hammer:  |
+| [vue/no-restricted-custom-event]            | disallow specific custom event                                                                |     :bulb:     |  :hammer:  |
+| [vue/no-restricted-html-elements]           | disallow specific HTML elements                                                               |                |  :hammer:  |
+| [vue/no-restricted-props]                   | disallow specific props                                                                       |     :bulb:     |  :hammer:  |
+| [vue/no-restricted-static-attribute]        | disallow specific attribute                                                                   |                |  :hammer:  |
+| [vue/no-restricted-v-bind]                  | disallow specific argument in `v-bind`                                                        |                |  :hammer:  |
+| [vue/no-restricted-v-on]                    | disallow specific argument in `v-on`                                                          |                |  :hammer:  |
+| [vue/no-root-v-if]                          | disallow `v-if` directives on root element                                                    |                |  :hammer:  |
+| [vue/no-setup-props-reactivity-loss]        | disallow usages that lose the reactivity of `props` passed to `setup`                         |                |  :hammer:  |
+| [vue/no-static-inline-styles]               | disallow static inline `style` attributes                                                     |                |  :hammer:  |
+| [vue/no-template-target-blank]              | disallow target="\_blank" attribute without rel="noopener noreferrer"                         |     :bulb:     | :warning:  |
+| [vue/no-this-in-before-route-enter]         | disallow `this` usage in a `beforeRouteEnter` method                                          |                | :warning:  |
+| [vue/no-undef-components]                   | disallow use of undefined components in `<template>`                                          |                |  :hammer:  |
+| [vue/no-undef-properties]                   | disallow undefined properties                                                                 |                |  :hammer:  |
+| [vue/no-unsupported-features]               | disallow unsupported Vue.js syntax on the specified version                                   |    :wrench:    |  :hammer:  |
+| [vue/no-unused-emit-declarations]           | disallow unused emit declarations                                                             |                |  :hammer:  |
+| [vue/no-unused-properties]                  | disallow unused properties                                                                    |                |  :hammer:  |
+| [vue/no-unused-refs]                        | disallow unused refs                                                                          |                |  :hammer:  |
+| [vue/no-use-v-else-with-v-for]              | disallow using `v-else-if`/`v-else` on the same element as `v-for`                            |                |  :hammer:  |
+| [vue/no-useless-mustaches]                  | disallow unnecessary mustache interpolations                                                  |    :wrench:    |  :hammer:  |
+| [vue/no-useless-v-bind]                     | disallow unnecessary `v-bind` directives                                                      |    :wrench:    |  :hammer:  |
+| [vue/no-v-text]                             | disallow use of v-text                                                                        |                |  :hammer:  |
+| [vue/padding-line-between-blocks]           | require or disallow padding lines between blocks                                              |    :wrench:    | :lipstick: |
+| [vue/padding-line-between-tags]             | require or disallow newlines between sibling tags in template                                 |    :wrench:    | :lipstick: |
+| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition                                     |    :wrench:    | :lipstick: |
+| [vue/prefer-define-options]                 | enforce use of `defineOptions` instead of default export                                      |    :wrench:    |  :hammer:  |
+| [vue/prefer-prop-type-boolean-first]        | enforce `Boolean` comes first in component prop types                                         |     :bulb:     | :warning:  |
+| [vue/prefer-separate-static-class]          | require static class names in template to be in a separate `class` attribute                  |    :wrench:    |  :hammer:  |
+| [vue/prefer-true-attribute-shorthand]       | require shorthand form attribute when `v-bind` value is `true`                                |     :bulb:     |  :hammer:  |
+| [vue/prefer-use-template-ref]               | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs                |                |  :hammer:  |
+| [vue/require-default-export]                | require components to be the default export                                                   |                | :warning:  |
+| [vue/require-direct-export]                 | require the component to be directly exported                                                 |                |  :hammer:  |
+| [vue/require-emit-validator]                | require type definitions in emits                                                             |     :bulb:     |  :hammer:  |
+| [vue/require-explicit-slots]                | require slots to be explicitly defined                                                        |                | :warning:  |
+| [vue/require-expose]                        | require declare public properties using `expose`                                              |     :bulb:     |  :hammer:  |
+| [vue/require-macro-variable-name]           | require a certain macro variable name                                                         |     :bulb:     |  :hammer:  |
+| [vue/require-name-property]                 | require a name property in Vue components                                                     |     :bulb:     |  :hammer:  |
+| [vue/require-prop-comment]                  | require props to have a comment                                                               |                |  :hammer:  |
+| [vue/require-typed-object-prop]             | enforce adding type declarations to object props                                              |     :bulb:     |  :hammer:  |
+| [vue/require-typed-ref]                     | require `ref` and `shallowRef` functions to be strongly typed                                 |                |  :hammer:  |
+| [vue/restricted-component-names]            | enforce using only specific component names                                                   |                | :warning:  |
+| [vue/script-indent]                         | enforce consistent indentation in `<script>`                                                  |    :wrench:    | :lipstick: |
+| [vue/slot-name-casing]                      | enforce specific casing for slot names                                                        |                |  :hammer:  |
+| [vue/sort-keys]                             | enforce sort-keys in a manner that is compatible with order-in-components                     |                |  :hammer:  |
+| [vue/static-class-names-order]              | enforce static class names order                                                              |    :wrench:    |  :hammer:  |
+| [vue/v-for-delimiter-style]                 | enforce `v-for` directive's delimiter style                                                   |    :wrench:    | :lipstick: |
+| [vue/v-if-else-key]                         | require key attribute for conditionally rendered repeated components                          |    :wrench:    | :warning:  |
+| [vue/v-on-handler-style]                    | enforce writing style for handlers in `v-on` directives                                       |    :wrench:    |  :hammer:  |
 
 </rules-table>
 
@@ -299,47 +300,47 @@ The following rules extend the rules provided by ESLint itself and apply them to
 
 <rules-table>
 
-| Rule ID | Description |    |    |
-|:--------|:------------|:--:|:--:|
-| [vue/array-bracket-newline] | Enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: | :lipstick: |
-| [vue/array-bracket-spacing] | Enforce consistent spacing inside array brackets in `<template>` | :wrench: | :lipstick: |
-| [vue/array-element-newline] | Enforce line breaks after each array element in `<template>` | :wrench: | :lipstick: |
-| [vue/arrow-spacing] | Enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: | :lipstick: |
-| [vue/block-spacing] | Disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: | :lipstick: |
-| [vue/brace-style] | Enforce consistent brace style for blocks in `<template>` | :wrench: | :lipstick: |
-| [vue/camelcase] | Enforce camelcase naming convention in `<template>` |  | :hammer: |
-| [vue/comma-dangle] | Require or disallow trailing commas in `<template>` | :wrench: | :lipstick: |
-| [vue/comma-spacing] | Enforce consistent spacing before and after commas in `<template>` | :wrench: | :lipstick: |
-| [vue/comma-style] | Enforce consistent comma style in `<template>` | :wrench: | :lipstick: |
-| [vue/dot-location] | Enforce consistent newlines before and after dots in `<template>` | :wrench: | :lipstick: |
-| [vue/dot-notation] | Enforce dot notation whenever possible in `<template>` | :wrench: | :hammer: |
-| [vue/eqeqeq] | Require the use of `===` and `!==` in `<template>` | :wrench: | :hammer: |
-| [vue/func-call-spacing] | Require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: | :lipstick: |
-| [vue/key-spacing] | Enforce consistent spacing between property names and type annotations in types and interfaces in `<template>` | :wrench: | :lipstick: |
-| [vue/keyword-spacing] | Enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
-| [vue/max-len] | enforce a maximum line length in `.vue` files |  | :lipstick: |
-| [vue/multiline-ternary] | Enforce newlines between operands of ternary expressions in `<template>` | :wrench: | :lipstick: |
-| [vue/no-console] | Disallow the use of `console` in `<template>` | :bulb: | :hammer: |
-| [vue/no-constant-condition] | Disallow constant expressions in conditions in `<template>` |  | :warning: |
-| [vue/no-empty-pattern] | Disallow empty destructuring patterns in `<template>` |  | :warning: |
-| [vue/no-extra-parens] | Disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
-| [vue/no-implicit-coercion] | Disallow shorthand type conversions in `<template>` | :wrench: | :hammer: |
-| [vue/no-irregular-whitespace] | disallow irregular whitespace in `.vue` files |  | :warning: |
-| [vue/no-loss-of-precision] | Disallow literal numbers that lose precision in `<template>` |  | :warning: |
-| [vue/no-restricted-syntax] | Disallow specified syntax in `<template>` |  | :hammer: |
-| [vue/no-sparse-arrays] | Disallow sparse arrays in `<template>` |  | :warning: |
-| [vue/no-useless-concat] | Disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
-| [vue/object-curly-newline] | Enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: | :lipstick: |
-| [vue/object-curly-spacing] | Enforce consistent spacing inside braces in `<template>` | :wrench: | :lipstick: |
-| [vue/object-property-newline] | Enforce placing object properties on separate lines in `<template>` | :wrench: | :lipstick: |
-| [vue/object-shorthand] | Require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: | :hammer: |
-| [vue/operator-linebreak] | Enforce consistent linebreak style for operators in `<template>` | :wrench: | :lipstick: |
-| [vue/prefer-template] | Require template literals instead of string concatenation in `<template>` | :wrench: | :hammer: |
-| [vue/quote-props] | Require quotes around object literal, type literal, interfaces and enums property names in `<template>` | :wrench: | :lipstick: |
-| [vue/space-in-parens] | Enforce consistent spacing inside parentheses in `<template>` | :wrench: | :lipstick: |
-| [vue/space-infix-ops] | Require spacing around infix operators in `<template>` | :wrench: | :lipstick: |
-| [vue/space-unary-ops] | Enforce consistent spacing before or after unary operators in `<template>` | :wrench: | :lipstick: |
-| [vue/template-curly-spacing] | Require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: | :lipstick: |
+| Rule ID                       | Description                                                                                                    |          |            |
+| :---------------------------- | :------------------------------------------------------------------------------------------------------------- | :------: | :--------: |
+| [vue/array-bracket-newline]   | Enforce linebreaks after opening and before closing array brackets in `<template>`                             | :wrench: | :lipstick: |
+| [vue/array-bracket-spacing]   | Enforce consistent spacing inside array brackets in `<template>`                                               | :wrench: | :lipstick: |
+| [vue/array-element-newline]   | Enforce line breaks after each array element in `<template>`                                                   | :wrench: | :lipstick: |
+| [vue/arrow-spacing]           | Enforce consistent spacing before and after the arrow in arrow functions in `<template>`                       | :wrench: | :lipstick: |
+| [vue/block-spacing]           | Disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>`       | :wrench: | :lipstick: |
+| [vue/brace-style]             | Enforce consistent brace style for blocks in `<template>`                                                      | :wrench: | :lipstick: |
+| [vue/camelcase]               | Enforce camelcase naming convention in `<template>`                                                            |          |  :hammer:  |
+| [vue/comma-dangle]            | Require or disallow trailing commas in `<template>`                                                            | :wrench: | :lipstick: |
+| [vue/comma-spacing]           | Enforce consistent spacing before and after commas in `<template>`                                             | :wrench: | :lipstick: |
+| [vue/comma-style]             | Enforce consistent comma style in `<template>`                                                                 | :wrench: | :lipstick: |
+| [vue/dot-location]            | Enforce consistent newlines before and after dots in `<template>`                                              | :wrench: | :lipstick: |
+| [vue/dot-notation]            | Enforce dot notation whenever possible in `<template>`                                                         | :wrench: |  :hammer:  |
+| [vue/eqeqeq]                  | Require the use of `===` and `!==` in `<template>`                                                             | :wrench: |  :hammer:  |
+| [vue/func-call-spacing]       | Require or disallow spacing between function identifiers and their invocations in `<template>`                 | :wrench: | :lipstick: |
+| [vue/key-spacing]             | Enforce consistent spacing between property names and type annotations in types and interfaces in `<template>` | :wrench: | :lipstick: |
+| [vue/keyword-spacing]         | Enforce consistent spacing before and after keywords in `<template>`                                           | :wrench: | :lipstick: |
+| [vue/max-len]                 | enforce a maximum line length in `.vue` files                                                                  |          | :lipstick: |
+| [vue/multiline-ternary]       | Enforce newlines between operands of ternary expressions in `<template>`                                       | :wrench: | :lipstick: |
+| [vue/no-console]              | Disallow the use of `console` in `<template>`                                                                  |  :bulb:  |  :hammer:  |
+| [vue/no-constant-condition]   | Disallow constant expressions in conditions in `<template>`                                                    |          | :warning:  |
+| [vue/no-empty-pattern]        | Disallow empty destructuring patterns in `<template>`                                                          |          | :warning:  |
+| [vue/no-extra-parens]         | Disallow unnecessary parentheses in `<template>`                                                               | :wrench: | :lipstick: |
+| [vue/no-implicit-coercion]    | Disallow shorthand type conversions in `<template>`                                                            | :wrench: |  :hammer:  |
+| [vue/no-irregular-whitespace] | disallow irregular whitespace in `.vue` files                                                                  |          | :warning:  |
+| [vue/no-loss-of-precision]    | Disallow literal numbers that lose precision in `<template>`                                                   |          | :warning:  |
+| [vue/no-restricted-syntax]    | Disallow specified syntax in `<template>`                                                                      |          |  :hammer:  |
+| [vue/no-sparse-arrays]        | Disallow sparse arrays in `<template>`                                                                         |          | :warning:  |
+| [vue/no-useless-concat]       | Disallow unnecessary concatenation of literals or template literals in `<template>`                            |          |  :hammer:  |
+| [vue/object-curly-newline]    | Enforce consistent line breaks after opening and before closing braces in `<template>`                         | :wrench: | :lipstick: |
+| [vue/object-curly-spacing]    | Enforce consistent spacing inside braces in `<template>`                                                       | :wrench: | :lipstick: |
+| [vue/object-property-newline] | Enforce placing object properties on separate lines in `<template>`                                            | :wrench: | :lipstick: |
+| [vue/object-shorthand]        | Require or disallow method and property shorthand syntax for object literals in `<template>`                   | :wrench: |  :hammer:  |
+| [vue/operator-linebreak]      | Enforce consistent linebreak style for operators in `<template>`                                               | :wrench: | :lipstick: |
+| [vue/prefer-template]         | Require template literals instead of string concatenation in `<template>`                                      | :wrench: |  :hammer:  |
+| [vue/quote-props]             | Require quotes around object literal, type literal, interfaces and enums property names in `<template>`        | :wrench: | :lipstick: |
+| [vue/space-in-parens]         | Enforce consistent spacing inside parentheses in `<template>`                                                  | :wrench: | :lipstick: |
+| [vue/space-infix-ops]         | Require spacing around infix operators in `<template>`                                                         | :wrench: | :lipstick: |
+| [vue/space-unary-ops]         | Enforce consistent spacing before or after unary operators in `<template>`                                     | :wrench: | :lipstick: |
+| [vue/template-curly-spacing]  | Require or disallow spacing around embedded expressions of template strings in `<template>`                    | :wrench: | :lipstick: |
 
 </rules-table>
 
@@ -348,29 +349,29 @@ The following rules extend the rules provided by ESLint itself and apply them to
 - :no_entry_sign: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
 - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
 
-| Rule ID | Replaced by |
-|:--------|:------------|
-| [vue/no-v-for-template-key] | (no replacement) |
-| [vue/no-v-model-argument] | (no replacement) |
+| Rule ID                      | Replaced by      |
+| :--------------------------- | :--------------- |
+| [vue/no-v-for-template-key]  | (no replacement) |
+| [vue/no-v-model-argument]    | (no replacement) |
 | [vue/valid-model-definition] | (no replacement) |
-| [vue/valid-v-bind-sync] | (no replacement) |
+| [vue/valid-v-bind-sync]      | (no replacement) |
 
 ## Removed
 
 - :no_entry: These rules have been removed in a previous major release, after they have been deprecated for a while.
 
-| Rule ID | Replaced by | Deprecated in version  | Removed in version |
-|:--------|:------------|:-----------------------|:-------------------|
-| [vue/component-tags-order] | [vue/block-order] | [v9.16.0] | [v10.0.0] |
-| [vue/experimental-script-setup-vars] | (no replacement) | [v7.13.0] | [v9.0.0] |
-| [vue/name-property-casing] | [vue/component-definition-name-casing] | [v7.0.0] | [v9.0.0] |
-| [vue/no-confusing-v-for-v-if] | [vue/no-use-v-if-with-v-for] | [v5.0.0] | [v9.0.0] |
-| [vue/no-invalid-model-keys] | [vue/valid-model-definition] | [v9.0.0] | [v10.0.0] |
-| [vue/no-ref-object-destructure] | [vue/no-ref-object-reactivity-loss] | [v9.17.0] | [v10.0.0] |
-| [vue/no-setup-props-destructure] | [vue/no-setup-props-reactivity-loss] | [v9.17.0] | [v10.0.0] |
-| [vue/no-unregistered-components] | [vue/no-undef-components] | [v8.4.0] | [v9.0.0] |
-| [vue/script-setup-uses-vars] | (no replacement) | [v9.0.0] | [v10.0.0] |
-| [vue/v-on-function-call] | [vue/v-on-handler-style] | [v9.7.0] | [v10.0.0] |
+| Rule ID                              | Replaced by                            | Deprecated in version | Removed in version |
+| :----------------------------------- | :------------------------------------- | :-------------------- | :----------------- |
+| [vue/component-tags-order]           | [vue/block-order]                      | [v9.16.0]             | [v10.0.0]          |
+| [vue/experimental-script-setup-vars] | (no replacement)                       | [v7.13.0]             | [v9.0.0]           |
+| [vue/name-property-casing]           | [vue/component-definition-name-casing] | [v7.0.0]              | [v9.0.0]           |
+| [vue/no-confusing-v-for-v-if]        | [vue/no-use-v-if-with-v-for]           | [v5.0.0]              | [v9.0.0]           |
+| [vue/no-invalid-model-keys]          | [vue/valid-model-definition]           | [v9.0.0]              | [v10.0.0]          |
+| [vue/no-ref-object-destructure]      | [vue/no-ref-object-reactivity-loss]    | [v9.17.0]             | [v10.0.0]          |
+| [vue/no-setup-props-destructure]     | [vue/no-setup-props-reactivity-loss]   | [v9.17.0]             | [v10.0.0]          |
+| [vue/no-unregistered-components]     | [vue/no-undef-components]              | [v8.4.0]              | [v9.0.0]           |
+| [vue/script-setup-uses-vars]         | (no replacement)                       | [v9.0.0]              | [v10.0.0]          |
+| [vue/v-on-function-call]             | [vue/v-on-handler-style]               | [v9.7.0]              | [v10.0.0]          |
 
 <!-- link definitions for rules -->
 
@@ -544,6 +545,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 [vue/padding-line-between-blocks]: ./padding-line-between-blocks.md
 [vue/padding-line-between-tags]: ./padding-line-between-tags.md
 [vue/padding-lines-in-component-definition]: ./padding-lines-in-component-definition.md
+[vue/prefer-define-component]: ./prefer-define-component.md
 [vue/prefer-define-options]: ./prefer-define-options.md
 [vue/prefer-import-from-vue]: ./prefer-import-from-vue.md
 [vue/prefer-prop-type-boolean-first]: ./prefer-prop-type-boolean-first.md
diff --git a/docs/rules/prefer-define-component.md b/docs/rules/prefer-define-component.md
new file mode 100644
index 000000000..03f02bf41
--- /dev/null
+++ b/docs/rules/prefer-define-component.md
@@ -0,0 +1,96 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-define-component
+description: require components to be defined using `defineComponent`
+---
+
+# vue/prefer-define-component
+
+> require components to be defined using `defineComponent`
+
+## :book: Rule Details
+
+This rule enforces the use of `defineComponent` when defining Vue components. Using `defineComponent` provides proper typing in Vue 3 and IDE support for object properties.
+
+<eslint-code-block :rules="{'vue/prefer-define-component': ['error']}">
+
+```vue
+<script>
+import { defineComponent } from 'vue'
+
+/* ✓ GOOD */
+export default defineComponent({
+  name: 'ComponentA',
+  props: {
+    message: String
+  }
+})
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/prefer-define-component': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  name: 'ComponentA',
+  props: {
+    message: String
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/prefer-define-component': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default Vue.extend({
+  name: 'ComponentA',
+  props: {
+    message: String
+  }
+})
+</script>
+```
+
+</eslint-code-block>
+
+This rule doesn't report components using `<script setup>` without a normal `<script>` tag, as those don't require `defineComponent`.
+
+<eslint-code-block :rules="{'vue/prefer-define-component': ['error']}">
+
+```vue
+<script setup>
+/* ✓ GOOD - script setup doesn't need defineComponent */
+import { ref } from 'vue'
+const count = ref(0)
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/require-default-export](./require-default-export.md)
+- [vue/require-direct-export](./require-direct-export.md)
+
+## :books: Further Reading
+
+- [Vue.js Guide - TypeScript with Composition API](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-define-component.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-define-component.js)
diff --git a/lib/index.js b/lib/index.js
index 834e5f28b..fc4e66baf 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -204,6 +204,7 @@ const plugin = {
     'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
     'padding-line-between-tags': require('./rules/padding-line-between-tags'),
     'padding-lines-in-component-definition': require('./rules/padding-lines-in-component-definition'),
+    'prefer-define-component': require('./rules/prefer-define-component'),
     'prefer-define-options': require('./rules/prefer-define-options'),
     'prefer-import-from-vue': require('./rules/prefer-import-from-vue'),
     'prefer-prop-type-boolean-first': require('./rules/prefer-prop-type-boolean-first'),
diff --git a/lib/rules/prefer-define-component.js b/lib/rules/prefer-define-component.js
index 7927de0ce..2ef6246db 100644
--- a/lib/rules/prefer-define-component.js
+++ b/lib/rules/prefer-define-component.js
@@ -11,7 +11,7 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'require components to be defined using `defineComponent`',
+      description: 'enforce components to be defined using `defineComponent`',
       categories: ['vue3-recommended', 'vue2-recommended'],
       url: 'https://eslint.vuejs.org/rules/prefer-define-component.html'
     },