# Available rules

Legend

🔧 Indicates that the rule is fixable, and using --fix option on the command line (opens new window) can automatically fix some of the reported problems.

💡 Indicates that some problems reported by the rule are manually fixable by editor suggestions (opens new window).

Mark indicating rule type:

  • ⚠️ Possible Problems: These rules relate to possible logic errors in code.
  • 🔨 Suggestions: These rules suggest alternate ways of doing things.
  • 💄 Layout & Formatting: These rules care about how the code looks rather than how it executes.

# Base Rules (Enabling Correct ESLint Parsing)

Rules in this category are enabled for all presets provided by eslint-plugin-vue.

Rule ID Description
vue/comment-directive support comment-directives in <template> ⚠️
vue/jsx-uses-vars prevent variables used in JSX to be marked as unused ⚠️

# Priority A: Essential (Error Prevention)

  • 3️⃣ Indicates that the rule is for Vue 3 and is included in all of "plugin:vue/vue3-essential", "plugin:vue/vue3-strongly-recommended" and "plugin:vue/vue3-recommended" presets.
  • 2️⃣ Indicates that the rule is for Vue 2 and is included in all of "plugin:vue/essential", "plugin:vue/strongly-recommended" and "plugin:vue/recommended" presets.
Rule ID Description
vue/multi-word-component-names require component names to be always multi-word 3️⃣2️⃣🔨
vue/no-arrow-functions-in-watch disallow using arrow functions to define watcher 3️⃣2️⃣⚠️
vue/no-async-in-computed-properties disallow asynchronous actions in computed properties 3️⃣2️⃣⚠️
vue/no-child-content disallow element's child contents which would be overwritten by a directive like v-html or v-text 💡 3️⃣2️⃣⚠️
vue/no-computed-properties-in-data disallow accessing computed properties in data. 3️⃣2️⃣⚠️
vue/no-custom-modifiers-on-v-model disallow custom modifiers on v-model used on the component 2️⃣⚠️
vue/no-deprecated-data-object-declaration disallow using deprecated object declaration on data (in Vue.js 3.0.0+) 🔧 3️⃣⚠️
vue/no-deprecated-destroyed-lifecycle disallow using deprecated destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+) 🔧 3️⃣⚠️
vue/no-deprecated-dollar-listeners-api disallow using deprecated $listeners (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-dollar-scopedslots-api disallow using deprecated $scopedSlots (in Vue.js 3.0.0+) 🔧 3️⃣⚠️
vue/no-deprecated-events-api disallow using deprecated events api (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-filter disallow using deprecated filters syntax (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-functional-template disallow using deprecated the functional template (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-html-element-is disallow using deprecated the is attribute on HTML elements (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-inline-template disallow using deprecated inline-template attribute (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-props-default-this disallow deprecated this access in props default function (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-router-link-tag-prop disallow using deprecated tag property on RouterLink (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-scope-attribute disallow deprecated scope attribute (in Vue.js 2.5.0+) 🔧 3️⃣🔨
vue/no-deprecated-slot-attribute disallow deprecated slot attribute (in Vue.js 2.6.0+) 🔧 3️⃣🔨
vue/no-deprecated-slot-scope-attribute disallow deprecated slot-scope attribute (in Vue.js 2.6.0+) 🔧 3️⃣🔨
vue/no-deprecated-v-bind-sync disallow use of deprecated .sync modifier on v-bind directive (in Vue.js 3.0.0+) 🔧 3️⃣⚠️
vue/no-deprecated-v-is disallow deprecated v-is directive (in Vue.js 3.1.0+) 🔧 3️⃣🔨
vue/no-deprecated-v-on-native-modifier disallow using deprecated .native modifiers (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-deprecated-v-on-number-modifiers disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) 🔧 3️⃣⚠️
vue/no-deprecated-vue-config-keycodes disallow using deprecated Vue.config.keyCodes (in Vue.js 3.0.0+) 3️⃣⚠️
vue/no-dupe-keys disallow duplication of field names 3️⃣2️⃣⚠️
vue/no-dupe-v-else-if disallow duplicate conditions in v-if / v-else-if chains 3️⃣2️⃣⚠️
vue/no-duplicate-attributes disallow duplication of attributes 3️⃣2️⃣⚠️
vue/no-export-in-script-setup disallow export in <script setup> 3️⃣2️⃣⚠️
vue/no-expose-after-await disallow asynchronously registered expose 3️⃣⚠️
vue/no-lifecycle-after-await disallow asynchronously registered lifecycle hooks 3️⃣🔨
vue/no-multiple-template-root disallow adding multiple root nodes to the template 2️⃣⚠️
vue/no-mutating-props disallow mutation of component props 3️⃣2️⃣🔨
vue/no-parsing-error disallow parsing errors in <template> 3️⃣2️⃣⚠️
vue/no-ref-as-operand disallow use of value wrapped by ref() (Composition API) as an operand 🔧 3️⃣2️⃣🔨
vue/no-reserved-component-names disallow the use of reserved names in component definitions 3️⃣2️⃣🔨
vue/no-reserved-keys disallow overwriting reserved keys 3️⃣2️⃣🔨
vue/no-reserved-props disallow reserved names in props 3️⃣2️⃣⚠️
vue/no-setup-props-destructure disallow destructuring of props passed to setup 3️⃣2️⃣🔨
vue/no-shared-component-data enforce component's data property to be a function 🔧 3️⃣2️⃣⚠️
vue/no-side-effects-in-computed-properties disallow side effects in computed properties 3️⃣2️⃣⚠️
vue/no-template-key disallow key attribute on <template> 3️⃣2️⃣⚠️
vue/no-textarea-mustache disallow mustaches in <textarea> 3️⃣2️⃣⚠️
vue/no-unused-components disallow registering components that are not used inside templates 3️⃣2️⃣🔨
vue/no-unused-vars disallow unused variable definitions of v-for directives or scope attributes 💡 3️⃣2️⃣🔨
vue/no-use-computed-property-like-method disallow use computed property like method 3️⃣2️⃣⚠️
vue/no-use-v-if-with-v-for disallow use v-if on the same element as v-for 3️⃣2️⃣🔨
vue/no-useless-template-attributes disallow useless attribute on <template> 3️⃣2️⃣⚠️
vue/no-v-for-template-key-on-child disallow key of <template v-for> placed on child elements 3️⃣⚠️
vue/no-v-for-template-key disallow key attribute on <template v-for> 2️⃣⚠️
vue/no-v-model-argument disallow adding an argument to v-model used in custom component 2️⃣⚠️
vue/no-v-text-v-html-on-component disallow v-text / v-html on component 3️⃣2️⃣⚠️
vue/no-watch-after-await disallow asynchronously registered watch 3️⃣🔨
vue/prefer-import-from-vue enforce import from 'vue' instead of import from '@vue/*' 🔧 3️⃣🔨
vue/require-component-is require v-bind:is of <component> elements 3️⃣2️⃣⚠️
vue/require-prop-type-constructor require prop type to be a constructor 🔧 3️⃣2️⃣🔨
vue/require-render-return enforce render function to always return value 3️⃣2️⃣⚠️
vue/require-slots-as-functions enforce properties of $slots to be used as a function 3️⃣⚠️
vue/require-toggle-inside-transition require control the display of the content inside <transition> 3️⃣⚠️
vue/require-v-for-key require v-bind:key with v-for directives 3️⃣2️⃣⚠️
vue/require-valid-default-prop enforce props default values to be valid 3️⃣2️⃣🔨
vue/return-in-computed-property enforce that a return statement is present in computed property 3️⃣2️⃣⚠️
vue/return-in-emits-validator enforce that a return statement is present in emits validator 3️⃣2️⃣⚠️
vue/use-v-on-exact enforce usage of exact modifier on v-on 3️⃣2️⃣🔨
vue/valid-attribute-name require valid attribute names 3️⃣2️⃣⚠️
vue/valid-define-emits enforce valid defineEmits compiler macro 3️⃣2️⃣⚠️
vue/valid-define-props enforce valid defineProps compiler macro 3️⃣2️⃣⚠️
vue/valid-model-definition require valid keys in model option 2️⃣⚠️
vue/valid-next-tick enforce valid nextTick function calls 🔧💡 3️⃣2️⃣⚠️
vue/valid-template-root enforce valid template root 3️⃣2️⃣⚠️
vue/valid-v-bind-sync enforce valid .sync modifier on v-bind directives 2️⃣⚠️
vue/valid-v-bind enforce valid v-bind directives 3️⃣2️⃣⚠️
vue/valid-v-cloak enforce valid v-cloak directives 3️⃣2️⃣⚠️
vue/valid-v-else-if enforce valid v-else-if directives 3️⃣2️⃣⚠️
vue/valid-v-else enforce valid v-else directives 3️⃣2️⃣⚠️
vue/valid-v-for enforce valid v-for directives 3️⃣2️⃣⚠️
vue/valid-v-html enforce valid v-html directives 3️⃣2️⃣⚠️
vue/valid-v-if enforce valid v-if directives 3️⃣2️⃣⚠️
vue/valid-v-is enforce valid v-is directives 3️⃣⚠️
vue/valid-v-memo enforce valid v-memo directives 3️⃣⚠️
vue/valid-v-model enforce valid v-model directives 3️⃣2️⃣⚠️
vue/valid-v-on enforce valid v-on directives 3️⃣2️⃣⚠️
vue/valid-v-once enforce valid v-once directives 3️⃣2️⃣⚠️
vue/valid-v-pre enforce valid v-pre directives 3️⃣2️⃣⚠️
vue/valid-v-show enforce valid v-show directives 3️⃣2️⃣⚠️
vue/valid-v-slot enforce valid v-slot directives 3️⃣2️⃣⚠️
vue/valid-v-text enforce valid v-text directives 3️⃣2️⃣⚠️
  • 3️⃣ Indicates that the rule is for Vue 3 and is included in "plugin:vue/vue3-strongly-recommended" and "plugin:vue/vue3-recommended" presets.
  • 2️⃣ Indicates that the rule is for Vue 2 and is included in "plugin:vue/strongly-recommended" and "plugin:vue/recommended" presets.
Rule ID Description
vue/attribute-hyphenation enforce attribute naming style on custom components in template 🔧 3️⃣2️⃣🔨
vue/component-definition-name-casing enforce specific casing for component definition name 🔧 3️⃣2️⃣🔨
vue/first-attribute-linebreak enforce the location of first attribute 🔧 3️⃣2️⃣💄
vue/html-closing-bracket-newline require or disallow a line break before tag's closing brackets 🔧 3️⃣2️⃣💄
vue/html-closing-bracket-spacing require or disallow a space before tag's closing brackets 🔧 3️⃣2️⃣💄
vue/html-end-tags enforce end tag style 🔧 3️⃣2️⃣🔨
vue/html-indent enforce consistent indentation in <template> 🔧 3️⃣2️⃣💄
vue/html-quotes enforce quotes style of HTML attributes 🔧 3️⃣2️⃣💄
vue/html-self-closing enforce self-closing style 🔧 3️⃣2️⃣💄
vue/max-attributes-per-line enforce the maximum number of attributes per line 🔧 3️⃣2️⃣💄
vue/multiline-html-element-content-newline require a line break before and after the contents of a multiline element 🔧 3️⃣2️⃣💄
vue/mustache-interpolation-spacing enforce unified spacing in mustache interpolations 🔧 3️⃣2️⃣💄
vue/no-multi-spaces disallow multiple spaces 🔧 3️⃣2️⃣💄
vue/no-spaces-around-equal-signs-in-attribute disallow spaces around equal signs in attribute 🔧 3️⃣2️⃣💄
vue/no-template-shadow disallow variable declarations from shadowing variables declared in the outer scope 3️⃣2️⃣🔨
vue/one-component-per-file enforce that each component should be in its own file 3️⃣2️⃣🔨
vue/prop-name-casing enforce specific casing for the Prop name in Vue components 3️⃣2️⃣🔨
vue/require-default-prop require default value for props 3️⃣2️⃣🔨
vue/require-explicit-emits require emits option with name triggered by $emit() 💡 3️⃣🔨
vue/require-prop-types require type definitions in props 3️⃣2️⃣🔨
vue/singleline-html-element-content-newline require a line break before and after the contents of a singleline element 🔧 3️⃣2️⃣💄
vue/v-bind-style enforce v-bind directive style 🔧 3️⃣2️⃣🔨
vue/v-on-event-hyphenation enforce v-on event naming style on custom components in template 🔧 3️⃣🔨
vue/v-on-style enforce v-on directive style 🔧 3️⃣2️⃣🔨
vue/v-slot-style enforce v-slot directive style 🔧 3️⃣2️⃣🔨
  • 3️⃣ Indicates that the rule is for Vue 3 and is included in "plugin:vue/vue3-recommended" preset.
  • 2️⃣ Indicates that the rule is for Vue 2 and is included in "plugin:vue/recommended" preset.
Rule ID Description
vue/attributes-order enforce order of attributes 🔧 3️⃣2️⃣🔨
vue/component-tags-order enforce order of component top-level elements 🔧 3️⃣2️⃣🔨
vue/no-lone-template disallow unnecessary <template> 3️⃣2️⃣⚠️
vue/no-multiple-slot-args disallow to pass multiple arguments to scoped slots 3️⃣2️⃣⚠️
vue/no-v-html disallow use of v-html to prevent XSS attack 3️⃣2️⃣🔨
vue/order-in-components enforce order of properties in components 🔧 3️⃣2️⃣🔨
vue/this-in-template disallow usage of this in template 🔧 3️⃣2️⃣🔨

# Uncategorized

No preset enables the rules in this category. Please enable each rule if you want.

For example:

{
  "rules": {
    "vue/block-lang": "error"
  }
}
Rule ID Description
vue/block-lang disallow use other than available lang 🔨
vue/block-tag-newline enforce line breaks after opening and before closing block-level tags 🔧 💄
vue/component-api-style enforce component API style 🔨
vue/component-name-in-template-casing enforce specific casing for the component naming style in template 🔧 🔨
vue/component-options-name-casing enforce the casing of component name in components options 🔧💡 🔨
vue/custom-event-name-casing enforce specific casing for custom event name 🔨
vue/define-macros-order enforce order of defineEmits and defineProps compiler macros 🔧 💄
vue/html-button-has-type disallow usage of button without an explicit type attribute 🔨
vue/html-comment-content-newline enforce unified line brake in HTML comments 🔧 💄
vue/html-comment-content-spacing enforce unified spacing in HTML comments 🔧 💄
vue/html-comment-indent enforce consistent indentation in HTML comments 🔧 💄
vue/match-component-file-name require component name property to match its file name 💡 🔨
vue/match-component-import-name require the registered component name to match the imported component name ⚠️
vue/new-line-between-multi-line-property enforce new lines between multi-line properties in Vue components 🔧 💄
vue/next-tick-style enforce Promise or callback style in nextTick 🔧 🔨
vue/no-bare-strings-in-template disallow the use of bare strings in <template> 🔨
vue/no-boolean-default disallow boolean defaults 🔧 🔨
vue/no-duplicate-attr-inheritance enforce inheritAttrs to be set to false when using v-bind="$attrs" 🔨
vue/no-empty-component-block disallow the <template> <script> <style> block to be empty 🔨
vue/no-multiple-objects-in-class disallow to pass multiple objects into array to class 🔨
vue/no-potential-component-option-typo disallow a potential typo in your component property 💡 🔨
vue/no-ref-object-destructure disallow destructuring of ref objects that can lead to loss of reactivity ⚠️
vue/no-restricted-block disallow specific block 🔨
vue/no-restricted-call-after-await disallow asynchronously called restricted methods 🔨
vue/no-restricted-class disallow specific classes in Vue components ⚠️
vue/no-restricted-component-options disallow specific component option 🔨
vue/no-restricted-custom-event disallow specific custom event 💡 🔨
vue/no-restricted-html-elements disallow specific HTML elements 🔨
vue/no-restricted-props disallow specific props 💡 🔨
vue/no-restricted-static-attribute disallow specific attribute 🔨
vue/no-restricted-v-bind disallow specific argument in v-bind 🔨
vue/no-static-inline-styles disallow static inline style attributes 🔨
vue/no-template-target-blank disallow target="_blank" attribute without rel="noopener noreferrer" ⚠️
vue/no-this-in-before-route-enter disallow this usage in a beforeRouteEnter method ⚠️
vue/no-undef-components disallow use of undefined components in <template> 🔨
vue/no-undef-properties disallow undefined properties 🔨
vue/no-unsupported-features disallow unsupported Vue.js syntax on the specified version 🔧 🔨
vue/no-unused-properties disallow unused properties 🔨
vue/no-unused-refs disallow unused refs 🔨
vue/no-useless-mustaches disallow unnecessary mustache interpolations 🔧 🔨
vue/no-useless-v-bind disallow unnecessary v-bind directives 🔧 🔨
vue/no-v-text disallow use of v-text 🔨
vue/padding-line-between-blocks require or disallow padding lines between blocks 🔧 💄
vue/prefer-prop-type-boolean-first enforce Boolean comes first in component prop types 💡 ⚠️
vue/prefer-separate-static-class require static class names in template to be in a separate class attribute 🔧 🔨
vue/prefer-true-attribute-shorthand require shorthand form attribute when v-bind value is true 💡 🔨
vue/require-direct-export require the component to be directly exported 🔨
vue/require-emit-validator require type definitions in emits 💡 🔨
vue/require-expose require declare public properties using expose 💡 🔨
vue/require-name-property require a name property in Vue components 🔨
vue/script-indent enforce consistent indentation in <script> 🔧 💄
vue/sort-keys enforce sort-keys in a manner that is compatible with order-in-components 🔨
vue/static-class-names-order enforce static class names order 🔧 🔨
vue/v-for-delimiter-style enforce v-for directive's delimiter style 🔧 💄
vue/v-on-function-call enforce or forbid parentheses after method calls without arguments in v-on directives 🔧 🔨

# Extension Rules

The following rules extend the rules provided by ESLint itself and apply them to the expressions in the <template>.

Rule ID Description
vue/array-bracket-newline Enforce linebreaks after opening and before closing array brackets in <template> 🔧 💄
vue/array-bracket-spacing Enforce consistent spacing inside array brackets in <template> 🔧 💄
vue/arrow-spacing Enforce consistent spacing before and after the arrow in arrow functions in <template> 🔧 💄
vue/block-spacing Disallow or enforce spaces inside of blocks after opening block and before closing block in <template> 🔧 💄
vue/brace-style Enforce consistent brace style for blocks in <template> 🔧 💄
vue/camelcase Enforce camelcase naming convention in <template> 🔨
vue/comma-dangle Require or disallow trailing commas in <template> 🔧 💄
vue/comma-spacing Enforce consistent spacing before and after commas in <template> 🔧 💄
vue/comma-style Enforce consistent comma style in <template> 🔧 💄
vue/dot-location Enforce consistent newlines before and after dots in <template> 🔧 💄
vue/dot-notation Enforce dot notation whenever possible in <template> 🔧 🔨
vue/eqeqeq Require the use of === and !== in <template> 🔧 🔨
vue/func-call-spacing Require or disallow spacing between function identifiers and their invocations in <template> 🔧 💄
vue/key-spacing Enforce consistent spacing between keys and values in object literal properties in <template> 🔧 💄
vue/keyword-spacing Enforce consistent spacing before and after keywords in <template> 🔧 💄
vue/max-len enforce a maximum line length in .vue files 💄
vue/no-constant-condition Disallow constant expressions in conditions in <template> ⚠️
vue/no-empty-pattern Disallow empty destructuring patterns in <template> ⚠️
vue/no-extra-parens Disallow unnecessary parentheses in <template> 🔧 💄
vue/no-irregular-whitespace disallow irregular whitespace in .vue files ⚠️
vue/no-loss-of-precision Disallow literal numbers that lose precision in <template> ⚠️
vue/no-restricted-syntax Disallow specified syntax in <template> 🔨
vue/no-sparse-arrays Disallow sparse arrays in <template> ⚠️
vue/no-useless-concat Disallow unnecessary concatenation of literals or template literals in <template> 🔨
vue/object-curly-newline Enforce consistent line breaks after opening and before closing braces in <template> 🔧 💄
vue/object-curly-spacing Enforce consistent spacing inside braces in <template> 🔧 💄
vue/object-property-newline Enforce placing object properties on separate lines in <template> 🔧 💄
vue/object-shorthand Require or disallow method and property shorthand syntax for object literals in <template> 🔧 🔨
vue/operator-linebreak Enforce consistent linebreak style for operators in <template> 🔧 💄
vue/prefer-template Require template literals instead of string concatenation in <template> 🔧 🔨
vue/quote-props Require quotes around object literal property names in <template> 🔧 🔨
vue/space-in-parens Enforce consistent spacing inside parentheses in <template> 🔧 💄
vue/space-infix-ops Require spacing around infix operators in <template> 🔧 💄
vue/space-unary-ops Enforce consistent spacing before or after unary operators in <template> 🔧 💄
vue/template-curly-spacing Require or disallow spacing around embedded expressions of template strings in <template> 🔧 💄

# Deprecated

  • ⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
  • 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID Replaced by
vue/no-invalid-model-keys vue/valid-model-definition
vue/script-setup-uses-vars (no replacement)

# Removed

  • 🚫 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/experimental-script-setup-vars (no replacement) v7.13.0 (opens new window) v9.0.0 (opens new window)
vue/name-property-casing vue/component-definition-name-casing v7.0.0 (opens new window) v9.0.0 (opens new window)
vue/no-confusing-v-for-v-if vue/no-use-v-if-with-v-for v5.0.0 (opens new window) v9.0.0 (opens new window)
vue/no-unregistered-components vue/no-undef-components v8.4.0 (opens new window) v9.0.0 (opens new window)
Last Updated: 9/10/2022, 10:53:36 PM