sidebarDepth
0

Available rules

::: tip Legend :wrench: 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. :::

Base Rules (Enabling Correct ESLint Parsing)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/base"
}

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
vue/script-setup-uses-vars	prevent <script setup> variables used in <template> to be marked as unused

Priority A: Essential (Error Prevention) for Vue.js 3.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/vue3-essential"
}

Rule ID	Description
vue/multi-word-component-names	require component names to be always multi-word
vue/no-arrow-functions-in-watch	disallow using arrow functions to define watcher
vue/no-async-in-computed-properties	disallow asynchronous actions in computed properties
vue/no-computed-properties-in-data	disallow accessing computed properties in data.
vue/no-deprecated-data-object-declaration	disallow using deprecated object declaration on data (in Vue.js 3.0.0+)	🔧
vue/no-deprecated-destroyed-lifecycle	disallow using deprecated destroyed and beforeDestroy lifecycle hooks (in Vue.js 3.0.0+)	🔧
vue/no-deprecated-dollar-listeners-api	disallow using deprecated $listeners (in Vue.js 3.0.0+)
vue/no-deprecated-dollar-scopedslots-api	disallow using deprecated $scopedSlots (in Vue.js 3.0.0+)	🔧
vue/no-deprecated-events-api	disallow using deprecated events api (in Vue.js 3.0.0+)
vue/no-deprecated-filter	disallow using deprecated filters syntax (in Vue.js 3.0.0+)
vue/no-deprecated-functional-template	disallow using deprecated the functional template (in Vue.js 3.0.0+)
vue/no-deprecated-html-element-is	disallow using deprecated the is attribute on HTML elements (in Vue.js 3.0.0+)
vue/no-deprecated-inline-template	disallow using deprecated inline-template attribute (in Vue.js 3.0.0+)
vue/no-deprecated-props-default-this	disallow deprecated this access in props default function (in Vue.js 3.0.0+)
vue/no-deprecated-router-link-tag-prop	disallow using deprecated tag property on RouterLink (in Vue.js 3.0.0+)
vue/no-deprecated-scope-attribute	disallow deprecated scope attribute (in Vue.js 2.5.0+)	🔧
vue/no-deprecated-slot-attribute	disallow deprecated slot attribute (in Vue.js 2.6.0+)	🔧
vue/no-deprecated-slot-scope-attribute	disallow deprecated slot-scope attribute (in Vue.js 2.6.0+)	🔧
vue/no-deprecated-v-bind-sync	disallow use of deprecated .sync modifier on v-bind directive (in Vue.js 3.0.0+)	🔧
vue/no-deprecated-v-is	disallow deprecated v-is directive (in Vue.js 3.1.0+)	🔧
vue/no-deprecated-v-on-native-modifier	disallow using deprecated .native modifiers (in Vue.js 3.0.0+)
vue/no-deprecated-v-on-number-modifiers	disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)	🔧
vue/no-deprecated-vue-config-keycodes	disallow using deprecated Vue.config.keyCodes (in Vue.js 3.0.0+)
vue/no-dupe-keys	disallow duplication of field names
vue/no-dupe-v-else-if	disallow duplicate conditions in v-if / v-else-if chains
vue/no-duplicate-attributes	disallow duplication of attributes
vue/no-export-in-script-setup	disallow export in <script setup>
vue/no-lifecycle-after-await	disallow asynchronously registered lifecycle hooks
vue/no-mutating-props	disallow mutation of component props
vue/no-parsing-error	disallow parsing errors in <template>
vue/no-ref-as-operand	disallow use of value wrapped by ref() (Composition API) as an operand	🔧
vue/no-reserved-keys	disallow overwriting reserved keys
vue/no-reserved-props	disallow reserved names in props
vue/no-setup-props-destructure	disallow destructuring of props passed to setup
vue/no-shared-component-data	enforce component's data property to be a function	🔧
vue/no-side-effects-in-computed-properties	disallow side effects in computed properties
vue/no-template-key	disallow key attribute on <template>
vue/no-textarea-mustache	disallow mustaches in <textarea>
vue/no-unused-components	disallow registering components that are not used inside templates
vue/no-unused-vars	disallow unused variable definitions of v-for directives or scope attributes	💡
vue/no-use-v-if-with-v-for	disallow use v-if on the same element as v-for
vue/no-useless-template-attributes	disallow useless attribute on <template>
vue/no-v-for-template-key-on-child	disallow key of <template v-for> placed on child elements
vue/no-watch-after-await	disallow asynchronously registered watch
vue/require-component-is	require v-bind:is of <component> elements
vue/require-prop-type-constructor	require prop type to be a constructor	🔧
vue/require-render-return	enforce render function to always return value
vue/require-slots-as-functions	enforce properties of $slots to be used as a function
vue/require-toggle-inside-transition	require control the display of the content inside <transition>
vue/require-v-for-key	require v-bind:key with v-for directives
vue/require-valid-default-prop	enforce props default values to be valid
vue/return-in-computed-property	enforce that a return statement is present in computed property
vue/return-in-emits-validator	enforce that a return statement is present in emits validator
vue/use-v-on-exact	enforce usage of exact modifier on v-on
vue/valid-define-emits	enforce valid defineEmits compiler macro
vue/valid-define-props	enforce valid defineProps compiler macro
vue/valid-next-tick	enforce valid nextTick function calls	🔧💡
vue/valid-template-root	enforce valid template root
vue/valid-v-bind	enforce valid v-bind directives
vue/valid-v-cloak	enforce valid v-cloak directives
vue/valid-v-else-if	enforce valid v-else-if directives
vue/valid-v-else	enforce valid v-else directives
vue/valid-v-for	enforce valid v-for directives
vue/valid-v-html	enforce valid v-html directives
vue/valid-v-if	enforce valid v-if directives
vue/valid-v-is	enforce valid v-is directives
vue/valid-v-memo	enforce valid v-memo directives
vue/valid-v-model	enforce valid v-model directives
vue/valid-v-on	enforce valid v-on directives
vue/valid-v-once	enforce valid v-once directives
vue/valid-v-pre	enforce valid v-pre directives
vue/valid-v-show	enforce valid v-show directives
vue/valid-v-slot	enforce valid v-slot directives
vue/valid-v-text	enforce valid v-text directives

Priority B: Strongly Recommended (Improving Readability) for Vue.js 3.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/vue3-strongly-recommended"
}

Rule ID	Description
vue/attribute-hyphenation	enforce attribute naming style on custom components in template	🔧
vue/component-definition-name-casing	enforce specific casing for component definition name	🔧
vue/first-attribute-linebreak	enforce the location of first attribute	🔧
vue/html-closing-bracket-newline	require or disallow a line break before tag's closing brackets	🔧
vue/html-closing-bracket-spacing	require or disallow a space before tag's closing brackets	🔧
vue/html-end-tags	enforce end tag style	🔧
vue/html-indent	enforce consistent indentation in <template>	🔧
vue/html-quotes	enforce quotes style of HTML attributes	🔧
vue/html-self-closing	enforce self-closing style	🔧
vue/max-attributes-per-line	enforce the maximum number of attributes per line	🔧
vue/multiline-html-element-content-newline	require a line break before and after the contents of a multiline element	🔧
vue/mustache-interpolation-spacing	enforce unified spacing in mustache interpolations	🔧
vue/no-multi-spaces	disallow multiple spaces	🔧
vue/no-spaces-around-equal-signs-in-attribute	disallow spaces around equal signs in attribute	🔧
vue/no-template-shadow	disallow variable declarations from shadowing variables declared in the outer scope
vue/one-component-per-file	enforce that each component should be in its own file
vue/prop-name-casing	enforce specific casing for the Prop name in Vue components
vue/require-default-prop	require default value for props
vue/require-explicit-emits	require emits option with name triggered by $emit()	💡
vue/require-prop-types	require type definitions in props
vue/singleline-html-element-content-newline	require a line break before and after the contents of a singleline element	🔧
vue/v-bind-style	enforce v-bind directive style	🔧
vue/v-on-event-hyphenation	enforce v-on event naming style on custom components in template	🔧
vue/v-on-style	enforce v-on directive style	🔧
vue/v-slot-style	enforce v-slot directive style	🔧

Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 3.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/vue3-recommended"
}

Rule ID	Description
vue/attributes-order	enforce order of attributes	🔧
vue/component-tags-order	enforce order of component top-level elements
vue/no-lone-template	disallow unnecessary <template>
vue/no-multiple-slot-args	disallow to pass multiple arguments to scoped slots
vue/no-v-html	disallow use of v-html to prevent XSS attack
vue/order-in-components	enforce order of properties in components	🔧
vue/this-in-template	disallow usage of this in template	🔧

Priority A: Essential (Error Prevention) for Vue.js 2.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/essential"
}

Rule ID	Description
vue/multi-word-component-names	require component names to be always multi-word
vue/no-arrow-functions-in-watch	disallow using arrow functions to define watcher
vue/no-async-in-computed-properties	disallow asynchronous actions in computed properties
vue/no-computed-properties-in-data	disallow accessing computed properties in data.
vue/no-custom-modifiers-on-v-model	disallow custom modifiers on v-model used on the component
vue/no-dupe-keys	disallow duplication of field names
vue/no-dupe-v-else-if	disallow duplicate conditions in v-if / v-else-if chains
vue/no-duplicate-attributes	disallow duplication of attributes
vue/no-multiple-template-root	disallow adding multiple root nodes to the template
vue/no-mutating-props	disallow mutation of component props
vue/no-parsing-error	disallow parsing errors in <template>
vue/no-reserved-keys	disallow overwriting reserved keys
vue/no-reserved-props	disallow reserved names in props
vue/no-shared-component-data	enforce component's data property to be a function	🔧
vue/no-side-effects-in-computed-properties	disallow side effects in computed properties
vue/no-template-key	disallow key attribute on <template>
vue/no-textarea-mustache	disallow mustaches in <textarea>
vue/no-unused-components	disallow registering components that are not used inside templates
vue/no-unused-vars	disallow unused variable definitions of v-for directives or scope attributes	💡
vue/no-use-v-if-with-v-for	disallow use v-if on the same element as v-for
vue/no-useless-template-attributes	disallow useless attribute on <template>
vue/no-v-for-template-key	disallow key attribute on <template v-for>
vue/no-v-model-argument	disallow adding an argument to v-model used in custom component
vue/require-component-is	require v-bind:is of <component> elements
vue/require-prop-type-constructor	require prop type to be a constructor	🔧
vue/require-render-return	enforce render function to always return value
vue/require-v-for-key	require v-bind:key with v-for directives
vue/require-valid-default-prop	enforce props default values to be valid
vue/return-in-computed-property	enforce that a return statement is present in computed property
vue/use-v-on-exact	enforce usage of exact modifier on v-on
vue/valid-next-tick	enforce valid nextTick function calls	🔧💡
vue/valid-template-root	enforce valid template root
vue/valid-v-bind-sync	enforce valid .sync modifier on v-bind directives
vue/valid-v-bind	enforce valid v-bind directives
vue/valid-v-cloak	enforce valid v-cloak directives
vue/valid-v-else-if	enforce valid v-else-if directives
vue/valid-v-else	enforce valid v-else directives
vue/valid-v-for	enforce valid v-for directives
vue/valid-v-html	enforce valid v-html directives
vue/valid-v-if	enforce valid v-if directives
vue/valid-v-model	enforce valid v-model directives
vue/valid-v-on	enforce valid v-on directives
vue/valid-v-once	enforce valid v-once directives
vue/valid-v-pre	enforce valid v-pre directives
vue/valid-v-show	enforce valid v-show directives
vue/valid-v-slot	enforce valid v-slot directives
vue/valid-v-text	enforce valid v-text directives

Priority B: Strongly Recommended (Improving Readability) for Vue.js 2.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/strongly-recommended"
}

Rule ID	Description
vue/attribute-hyphenation	enforce attribute naming style on custom components in template	🔧
vue/component-definition-name-casing	enforce specific casing for component definition name	🔧
vue/first-attribute-linebreak	enforce the location of first attribute	🔧
vue/html-closing-bracket-newline	require or disallow a line break before tag's closing brackets	🔧
vue/html-closing-bracket-spacing	require or disallow a space before tag's closing brackets	🔧
vue/html-end-tags	enforce end tag style	🔧
vue/html-indent	enforce consistent indentation in <template>	🔧
vue/html-quotes	enforce quotes style of HTML attributes	🔧
vue/html-self-closing	enforce self-closing style	🔧
vue/max-attributes-per-line	enforce the maximum number of attributes per line	🔧
vue/multiline-html-element-content-newline	require a line break before and after the contents of a multiline element	🔧
vue/mustache-interpolation-spacing	enforce unified spacing in mustache interpolations	🔧
vue/no-multi-spaces	disallow multiple spaces	🔧
vue/no-spaces-around-equal-signs-in-attribute	disallow spaces around equal signs in attribute	🔧
vue/no-template-shadow	disallow variable declarations from shadowing variables declared in the outer scope
vue/one-component-per-file	enforce that each component should be in its own file
vue/prop-name-casing	enforce specific casing for the Prop name in Vue components
vue/require-default-prop	require default value for props
vue/require-prop-types	require type definitions in props
vue/singleline-html-element-content-newline	require a line break before and after the contents of a singleline element	🔧
vue/v-bind-style	enforce v-bind directive style	🔧
vue/v-on-style	enforce v-on directive style	🔧
vue/v-slot-style	enforce v-slot directive style	🔧

Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) for Vue.js 2.x

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/recommended"
}

Rule ID	Description
vue/attributes-order	enforce order of attributes	🔧
vue/component-tags-order	enforce order of component top-level elements
vue/no-lone-template	disallow unnecessary <template>
vue/no-multiple-slot-args	disallow to pass multiple arguments to scoped slots
vue/no-v-html	disallow use of v-html to prevent XSS attack
vue/order-in-components	enforce order of properties in components	🔧
vue/this-in-template	disallow usage of this in template	🔧

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/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/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-child-content	disallow element's child contents which would be overwritten by a directive like v-html or v-text	💡
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-expose-after-await	disallow asynchronously registered expose
vue/no-invalid-model-keys	require valid keys in model option
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-reserved-component-names	disallow the use of reserved names in component definitions
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-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-use-computed-property-like-method	disallow use computed property like method
vue/no-useless-mustaches	disallow unnecessary mustache interpolations	🔧
vue/no-useless-v-bind	disallow unnecessary v-bind directives	🔧
vue/no-v-text-v-html-on-component	disallow v-text / v-html on component
vue/no-v-text	disallow use of v-text
vue/padding-line-between-blocks	require or disallow padding lines between blocks	🔧
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/experimental-script-setup-vars	(no replacement)
vue/name-property-casing	vue/component-definition-name-casing
vue/no-confusing-v-for-v-if	vue/no-use-v-if-with-v-for
vue/no-unregistered-components	vue/no-undef-components