Skip to content
On this page

Available rules

Legend

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

💡 Indicates that some problems reported by the rule are manually fixable by editor suggestions.

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 IDDescription
vue/comment-directivesupport comment-directives in <template>⚠️
vue/jsx-uses-varsprevent 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 IDDescription
vue/multi-word-component-namesrequire component names to be always multi-word3️⃣2️⃣🔨
vue/no-arrow-functions-in-watchdisallow using arrow functions to define watcher3️⃣2️⃣⚠️
vue/no-async-in-computed-propertiesdisallow asynchronous actions in computed properties3️⃣2️⃣⚠️
vue/no-child-contentdisallow element's child contents which would be overwritten by a directive like v-html or v-text💡3️⃣2️⃣⚠️
vue/no-computed-properties-in-datadisallow accessing computed properties in data.3️⃣2️⃣⚠️
vue/no-custom-modifiers-on-v-modeldisallow custom modifiers on v-model used on the component2️⃣⚠️
vue/no-deprecated-data-object-declarationdisallow using deprecated object declaration on data (in Vue.js 3.0.0+)🔧3️⃣⚠️
vue/no-deprecated-destroyed-lifecycledisallow using deprecated destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+)🔧3️⃣⚠️
vue/no-deprecated-dollar-listeners-apidisallow using deprecated $listeners (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-dollar-scopedslots-apidisallow using deprecated $scopedSlots (in Vue.js 3.0.0+)🔧3️⃣⚠️
vue/no-deprecated-events-apidisallow using deprecated events api (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-filterdisallow using deprecated filters syntax (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-functional-templatedisallow using deprecated the functional template (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-html-element-isdisallow using deprecated the is attribute on HTML elements (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-inline-templatedisallow using deprecated inline-template attribute (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-props-default-thisdisallow deprecated this access in props default function (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-router-link-tag-propdisallow using deprecated tag property on RouterLink (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-scope-attributedisallow deprecated scope attribute (in Vue.js 2.5.0+)🔧3️⃣🔨
vue/no-deprecated-slot-attributedisallow deprecated slot attribute (in Vue.js 2.6.0+)🔧3️⃣🔨
vue/no-deprecated-slot-scope-attributedisallow deprecated slot-scope attribute (in Vue.js 2.6.0+)🔧3️⃣🔨
vue/no-deprecated-v-bind-syncdisallow use of deprecated .sync modifier on v-bind directive (in Vue.js 3.0.0+)🔧3️⃣⚠️
vue/no-deprecated-v-isdisallow deprecated v-is directive (in Vue.js 3.1.0+)🔧3️⃣🔨
vue/no-deprecated-v-on-native-modifierdisallow using deprecated .native modifiers (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-deprecated-v-on-number-modifiersdisallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)🔧3️⃣⚠️
vue/no-deprecated-vue-config-keycodesdisallow using deprecated Vue.config.keyCodes (in Vue.js 3.0.0+)3️⃣⚠️
vue/no-dupe-keysdisallow duplication of field names3️⃣2️⃣⚠️
vue/no-dupe-v-else-ifdisallow duplicate conditions in v-if / v-else-if chains3️⃣2️⃣⚠️
vue/no-duplicate-attributesdisallow duplication of attributes3️⃣2️⃣⚠️
vue/no-export-in-script-setupdisallow export in <script setup>3️⃣2️⃣⚠️
vue/no-expose-after-awaitdisallow asynchronously registered expose3️⃣⚠️
vue/no-lifecycle-after-awaitdisallow asynchronously registered lifecycle hooks3️⃣🔨
vue/no-multiple-template-rootdisallow adding multiple root nodes to the template2️⃣⚠️
vue/no-mutating-propsdisallow mutation of component props3️⃣2️⃣🔨
vue/no-parsing-errordisallow parsing errors in <template>3️⃣2️⃣⚠️
vue/no-ref-as-operanddisallow use of value wrapped by ref() (Composition API) as an operand🔧3️⃣2️⃣🔨
vue/no-reserved-component-namesdisallow the use of reserved names in component definitions3️⃣2️⃣🔨
vue/no-reserved-keysdisallow overwriting reserved keys3️⃣2️⃣🔨
vue/no-reserved-propsdisallow reserved names in props3️⃣2️⃣⚠️
vue/no-setup-props-destructuredisallow destructuring of props passed to setup3️⃣2️⃣🔨
vue/no-shared-component-dataenforce component's data property to be a function🔧3️⃣2️⃣⚠️
vue/no-side-effects-in-computed-propertiesdisallow side effects in computed properties3️⃣2️⃣⚠️
vue/no-template-keydisallow key attribute on <template>3️⃣2️⃣⚠️
vue/no-textarea-mustachedisallow mustaches in <textarea>3️⃣2️⃣⚠️
vue/no-unused-componentsdisallow registering components that are not used inside templates3️⃣2️⃣🔨
vue/no-unused-varsdisallow unused variable definitions of v-for directives or scope attributes💡3️⃣2️⃣🔨
vue/no-use-computed-property-like-methoddisallow use computed property like method3️⃣2️⃣⚠️
vue/no-use-v-if-with-v-fordisallow use v-if on the same element as v-for3️⃣2️⃣🔨
vue/no-useless-template-attributesdisallow useless attribute on <template>3️⃣2️⃣⚠️
vue/no-v-for-template-key-on-childdisallow key of <template v-for> placed on child elements3️⃣⚠️
vue/no-v-for-template-keydisallow key attribute on <template v-for>2️⃣⚠️
vue/no-v-model-argumentdisallow adding an argument to v-model used in custom component2️⃣⚠️
vue/no-v-text-v-html-on-componentdisallow v-text / v-html on component3️⃣2️⃣⚠️
vue/no-watch-after-awaitdisallow asynchronously registered watch3️⃣🔨
vue/prefer-import-from-vueenforce import from 'vue' instead of import from '@vue/*'🔧3️⃣🔨
vue/require-component-isrequire v-bind:is of <component> elements3️⃣2️⃣⚠️
vue/require-prop-type-constructorrequire prop type to be a constructor🔧3️⃣2️⃣🔨
vue/require-render-returnenforce render function to always return value3️⃣2️⃣⚠️
vue/require-slots-as-functionsenforce properties of $slots to be used as a function3️⃣⚠️
vue/require-toggle-inside-transitionrequire control the display of the content inside <transition>3️⃣⚠️
vue/require-v-for-keyrequire v-bind:key with v-for directives3️⃣2️⃣⚠️
vue/require-valid-default-propenforce props default values to be valid3️⃣2️⃣🔨
vue/return-in-computed-propertyenforce that a return statement is present in computed property3️⃣2️⃣⚠️
vue/return-in-emits-validatorenforce that a return statement is present in emits validator3️⃣2️⃣⚠️
vue/use-v-on-exactenforce usage of exact modifier on v-on3️⃣2️⃣🔨
vue/valid-attribute-namerequire valid attribute names3️⃣2️⃣⚠️
vue/valid-define-emitsenforce valid defineEmits compiler macro3️⃣2️⃣⚠️
vue/valid-define-propsenforce valid defineProps compiler macro3️⃣2️⃣⚠️
vue/valid-model-definitionrequire valid keys in model option2️⃣⚠️
vue/valid-next-tickenforce valid nextTick function calls🔧💡3️⃣2️⃣⚠️
vue/valid-template-rootenforce valid template root3️⃣2️⃣⚠️
vue/valid-v-bind-syncenforce valid .sync modifier on v-bind directives2️⃣⚠️
vue/valid-v-bindenforce valid v-bind directives3️⃣2️⃣⚠️
vue/valid-v-cloakenforce valid v-cloak directives3️⃣2️⃣⚠️
vue/valid-v-else-ifenforce valid v-else-if directives3️⃣2️⃣⚠️
vue/valid-v-elseenforce valid v-else directives3️⃣2️⃣⚠️
vue/valid-v-forenforce valid v-for directives3️⃣2️⃣⚠️
vue/valid-v-htmlenforce valid v-html directives3️⃣2️⃣⚠️
vue/valid-v-ifenforce valid v-if directives3️⃣2️⃣⚠️
vue/valid-v-isenforce valid v-is directives3️⃣⚠️
vue/valid-v-memoenforce valid v-memo directives3️⃣⚠️
vue/valid-v-modelenforce valid v-model directives3️⃣2️⃣⚠️
vue/valid-v-onenforce valid v-on directives3️⃣2️⃣⚠️
vue/valid-v-onceenforce valid v-once directives3️⃣2️⃣⚠️
vue/valid-v-preenforce valid v-pre directives3️⃣2️⃣⚠️
vue/valid-v-showenforce valid v-show directives3️⃣2️⃣⚠️
vue/valid-v-slotenforce valid v-slot directives3️⃣2️⃣⚠️
vue/valid-v-textenforce valid v-text directives3️⃣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 IDDescription
vue/attribute-hyphenationenforce attribute naming style on custom components in template🔧3️⃣2️⃣🔨
vue/component-definition-name-casingenforce specific casing for component definition name🔧3️⃣2️⃣🔨
vue/first-attribute-linebreakenforce the location of first attribute🔧3️⃣2️⃣💄
vue/html-closing-bracket-newlinerequire or disallow a line break before tag's closing brackets🔧3️⃣2️⃣💄
vue/html-closing-bracket-spacingrequire or disallow a space before tag's closing brackets🔧3️⃣2️⃣💄
vue/html-end-tagsenforce end tag style🔧3️⃣2️⃣🔨
vue/html-indentenforce consistent indentation in <template>🔧3️⃣2️⃣💄
vue/html-quotesenforce quotes style of HTML attributes🔧3️⃣2️⃣💄
vue/html-self-closingenforce self-closing style🔧3️⃣2️⃣💄
vue/max-attributes-per-lineenforce the maximum number of attributes per line🔧3️⃣2️⃣💄
vue/multiline-html-element-content-newlinerequire a line break before and after the contents of a multiline element🔧3️⃣2️⃣💄
vue/mustache-interpolation-spacingenforce unified spacing in mustache interpolations🔧3️⃣2️⃣💄
vue/no-multi-spacesdisallow multiple spaces🔧3️⃣2️⃣💄
vue/no-spaces-around-equal-signs-in-attributedisallow spaces around equal signs in attribute🔧3️⃣2️⃣💄
vue/no-template-shadowdisallow variable declarations from shadowing variables declared in the outer scope3️⃣2️⃣🔨
vue/one-component-per-fileenforce that each component should be in its own file3️⃣2️⃣🔨
vue/prop-name-casingenforce specific casing for the Prop name in Vue components3️⃣2️⃣🔨
vue/require-default-proprequire default value for props3️⃣2️⃣🔨
vue/require-explicit-emitsrequire emits option with name triggered by $emit()💡3️⃣🔨
vue/require-prop-typesrequire type definitions in props3️⃣2️⃣🔨
vue/singleline-html-element-content-newlinerequire a line break before and after the contents of a singleline element🔧3️⃣2️⃣💄
vue/v-bind-styleenforce v-bind directive style🔧3️⃣2️⃣🔨
vue/v-on-event-hyphenationenforce v-on event naming style on custom components in template🔧3️⃣🔨
vue/v-on-styleenforce v-on directive style🔧3️⃣2️⃣🔨
vue/v-slot-styleenforce 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 IDDescription
vue/attributes-orderenforce order of attributes🔧3️⃣2️⃣🔨
vue/component-tags-orderenforce order of component top-level elements🔧3️⃣2️⃣🔨
vue/no-lone-templatedisallow unnecessary <template>3️⃣2️⃣⚠️
vue/no-multiple-slot-argsdisallow to pass multiple arguments to scoped slots3️⃣2️⃣⚠️
vue/no-v-htmldisallow use of v-html to prevent XSS attack3️⃣2️⃣🔨
vue/order-in-componentsenforce order of properties in components🔧3️⃣2️⃣🔨
vue/this-in-templatedisallow 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:

json
{
  "rules": {
    "vue/block-lang": "error"
  }
}
Rule IDDescription
vue/block-langdisallow use other than available lang🔨
vue/block-tag-newlineenforce line breaks after opening and before closing block-level tags🔧💄
vue/component-api-styleenforce component API style🔨
vue/component-name-in-template-casingenforce specific casing for the component naming style in template🔧🔨
vue/component-options-name-casingenforce the casing of component name in components options🔧💡🔨
vue/custom-event-name-casingenforce specific casing for custom event name🔨
vue/define-emits-declarationenforce declaration style of defineEmits🔨
vue/define-macros-orderenforce order of defineEmits and defineProps compiler macros🔧💄
vue/define-props-declarationenforce declaration style of defineProps🔨
vue/html-button-has-typedisallow usage of button without an explicit type attribute🔨
vue/html-comment-content-newlineenforce unified line brake in HTML comments🔧💄
vue/html-comment-content-spacingenforce unified spacing in HTML comments🔧💄
vue/html-comment-indentenforce consistent indentation in HTML comments🔧💄
vue/match-component-file-namerequire component name property to match its file name💡🔨
vue/match-component-import-namerequire the registered component name to match the imported component name⚠️
vue/new-line-between-multi-line-propertyenforce new lines between multi-line properties in Vue components🔧💄
vue/next-tick-styleenforce Promise or callback style in nextTick🔧🔨
vue/no-bare-strings-in-templatedisallow the use of bare strings in <template>🔨
vue/no-boolean-defaultdisallow boolean defaults🔧🔨
vue/no-duplicate-attr-inheritanceenforce inheritAttrs to be set to false when using v-bind="$attrs"🔨
vue/no-empty-component-blockdisallow the <template> <script> <style> block to be empty🔨
vue/no-multiple-objects-in-classdisallow to pass multiple objects into array to class🔨
vue/no-potential-component-option-typodisallow a potential typo in your component property💡🔨
vue/no-ref-object-destructuredisallow destructuring of ref objects that can lead to loss of reactivity⚠️
vue/no-required-prop-with-defaultenforce props with default values to be optional🔧💡⚠️
vue/no-restricted-blockdisallow specific block🔨
vue/no-restricted-call-after-awaitdisallow asynchronously called restricted methods🔨
vue/no-restricted-classdisallow specific classes in Vue components⚠️
vue/no-restricted-component-optionsdisallow specific component option🔨
vue/no-restricted-custom-eventdisallow specific custom event💡🔨
vue/no-restricted-html-elementsdisallow specific HTML elements🔨
vue/no-restricted-propsdisallow specific props💡🔨
vue/no-restricted-static-attributedisallow specific attribute🔨
vue/no-restricted-v-binddisallow specific argument in v-bind🔨
vue/no-static-inline-stylesdisallow static inline style attributes🔨
vue/no-template-target-blankdisallow target="_blank" attribute without rel="noopener noreferrer"⚠️
vue/no-this-in-before-route-enterdisallow this usage in a beforeRouteEnter method⚠️
vue/no-undef-componentsdisallow use of undefined components in <template>🔨
vue/no-undef-propertiesdisallow undefined properties🔨
vue/no-unsupported-featuresdisallow unsupported Vue.js syntax on the specified version🔧🔨
vue/no-unused-propertiesdisallow unused properties🔨
vue/no-unused-refsdisallow unused refs🔨
vue/no-useless-mustachesdisallow unnecessary mustache interpolations🔧🔨
vue/no-useless-v-binddisallow unnecessary v-bind directives🔧🔨
vue/no-v-textdisallow use of v-text🔨
vue/padding-line-between-blocksrequire or disallow padding lines between blocks🔧💄
vue/padding-line-between-tagsrequire or disallow newlines between sibling tags in template🔧💄
vue/padding-lines-in-component-definitionrequire or disallow padding lines in component definition🔧💄
vue/prefer-prop-type-boolean-firstenforce Boolean comes first in component prop types💡⚠️
vue/prefer-separate-static-classrequire static class names in template to be in a separate class attribute🔧🔨
vue/prefer-true-attribute-shorthandrequire shorthand form attribute when v-bind value is true💡🔨
vue/require-direct-exportrequire the component to be directly exported🔨
vue/require-emit-validatorrequire type definitions in emits💡🔨
vue/require-exposerequire declare public properties using expose💡🔨
vue/require-name-propertyrequire a name property in Vue components💡🔨
vue/require-prop-commentrequire props to have a comment🔨
vue/script-indentenforce consistent indentation in <script>🔧💄
vue/sort-keysenforce sort-keys in a manner that is compatible with order-in-components🔨
vue/static-class-names-orderenforce static class names order🔧🔨
vue/v-for-delimiter-styleenforce v-for directive's delimiter style🔧💄
vue/v-on-handler-styleenforce writing style for handlers 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 IDDescription
vue/array-bracket-newlineEnforce linebreaks after opening and before closing array brackets in <template>🔧💄
vue/array-bracket-spacingEnforce consistent spacing inside array brackets in <template>🔧💄
vue/array-element-newlineEnforce line breaks after each array element in <template>🔧💄
vue/arrow-spacingEnforce consistent spacing before and after the arrow in arrow functions in <template>🔧💄
vue/block-spacingDisallow or enforce spaces inside of blocks after opening block and before closing block in <template>🔧💄
vue/brace-styleEnforce consistent brace style for blocks in <template>🔧💄
vue/camelcaseEnforce camelcase naming convention in <template>🔨
vue/comma-dangleRequire or disallow trailing commas in <template>🔧💄
vue/comma-spacingEnforce consistent spacing before and after commas in <template>🔧💄
vue/comma-styleEnforce consistent comma style in <template>🔧💄
vue/dot-locationEnforce consistent newlines before and after dots in <template>🔧💄
vue/dot-notationEnforce dot notation whenever possible in <template>🔧🔨
vue/eqeqeqRequire the use of === and !== in <template>🔧🔨
vue/func-call-spacingRequire or disallow spacing between function identifiers and their invocations in <template>🔧💄
vue/key-spacingEnforce consistent spacing between keys and values in object literal properties in <template>🔧💄
vue/keyword-spacingEnforce consistent spacing before and after keywords in <template>🔧💄
vue/max-lenenforce a maximum line length in .vue files💄
vue/multiline-ternaryEnforce newlines between operands of ternary expressions in <template>🔧💄
vue/no-constant-conditionDisallow constant expressions in conditions in <template>⚠️
vue/no-empty-patternDisallow empty destructuring patterns in <template>⚠️
vue/no-extra-parensDisallow unnecessary parentheses in <template>🔧💄
vue/no-irregular-whitespacedisallow irregular whitespace in .vue files⚠️
vue/no-loss-of-precisionDisallow literal numbers that lose precision in <template>⚠️
vue/no-restricted-syntaxDisallow specified syntax in <template>🔨
vue/no-sparse-arraysDisallow sparse arrays in <template>⚠️
vue/no-useless-concatDisallow unnecessary concatenation of literals or template literals in <template>🔨
vue/object-curly-newlineEnforce consistent line breaks after opening and before closing braces in <template>🔧💄
vue/object-curly-spacingEnforce consistent spacing inside braces in <template>🔧💄
vue/object-property-newlineEnforce placing object properties on separate lines in <template>🔧💄
vue/object-shorthandRequire or disallow method and property shorthand syntax for object literals in <template>🔧🔨
vue/operator-linebreakEnforce consistent linebreak style for operators in <template>🔧💄
vue/prefer-templateRequire template literals instead of string concatenation in <template>🔧🔨
vue/quote-propsRequire quotes around object literal property names in <template>🔧🔨
vue/space-in-parensEnforce consistent spacing inside parentheses in <template>🔧💄
vue/space-infix-opsRequire spacing around infix operators in <template>🔧💄
vue/space-unary-opsEnforce consistent spacing before or after unary operators in <template>🔧💄
vue/template-curly-spacingRequire 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 IDReplaced by
vue/no-invalid-model-keysvue/valid-model-definition
vue/script-setup-uses-vars(no replacement)
vue/v-on-function-callvue/v-on-handler-style

Removed

  • 🚫 These rules have been removed in a previous major release, after they have been deprecated for a while.
Rule IDReplaced byDeprecated in versionRemoved in version
vue/experimental-script-setup-vars(no replacement)v7.13.0v9.0.0
vue/name-property-casingvue/component-definition-name-casingv7.0.0v9.0.0
vue/no-confusing-v-for-v-ifvue/no-use-v-if-with-v-forv5.0.0v9.0.0
vue/no-unregistered-componentsvue/no-undef-componentsv8.4.0v9.0.0