vue/no-unsupported-features

disallow unsupported Vue.js syntax on the specified version

• 🔧 The --fix option on the command line (opens new window) can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule reports unsupported Vue.js syntax on the specified version.

🔧 Options

{
  "vue/no-unsupported-features": ["error", {
    "version": "^2.6.0",
    "ignores": []
  }]
}

• version ... The version option accepts the valid version range of node-semver (opens new window). Set the version of Vue.js you are using. This option is required.
• ignores ... You can use this ignores option to ignore the given features. The "ignores" option accepts an array of the following strings.
  • Vue.js 3.2.0+
    • "v-memo" ... v-memo (opens new window) directive.
    • "v-bind-prop-modifier-shorthand" ... v-bind with .prop modifier shorthand.
    • "v-bind-attr-modifier" ... .attr modifier on v-bind directive.
  • Vue.js 3.1.0+
    • "is-attribute-with-vue-prefix" ... is attribute with vue: prefix (opens new window)
  • Vue.js 3.0.0+
    • "style-css-vars-injection" ... SFC CSS variable injection (opens new window)
    • "script-setup" ... <script setup> (opens new window)
    • "v-model-argument" ... argument on v-model (opens new window)
    • "v-model-custom-modifiers" ... custom modifiers on v-model (opens new window)
    • "v-is" ... v-is (opens new window) directive.
  • Vue.js 2.6.0+
    • "dynamic-directive-arguments" ... dynamic directive arguments (opens new window).
    • "v-slot" ... v-slot (opens new window) directive.
  • Vue.js 2.5.0+
    • "slot-scope-attribute" ... slot-scope (opens new window) attributes.

{"version": "^2.6.0"}

<template> <!-- ✓ GOOD --> <MyInput v-bind:foo.sync="val" /> <!-- ✗ BAD --> <!-- argument on `v-model` --> <MyInput v-model:foo="val" /> <!-- custom modifiers on `v-model` --> <MyComp v-model.foo.bar="text" /> </template>

Now loading...

{"version": "^2.5.0"}

<template> <!-- ✓ GOOD --> <CustomComponent :foo="val" /> <ListComponent> <template slot="name" slot-scope="props"> {{ props.title }} </template> </ListComponent> <!-- ✗ BAD --> <!-- dynamic directive arguments --> <CustomComponent :[foo]="val" /> <ListComponent> <!-- v-slot --> <template v-slot:name="props"> {{ props.title }} </template> <template #name="props"> {{ props.title }} </template> </ListComponent> </template>

Now loading...

📚 Further Reading

• API - v-memo (opens new window)
• API - v-is (opens new window)
• API - v-is (Old) (opens new window)
• Guide - Dynamic Arguments (opens new window)
• API - v-slot (opens new window)
• API (for v2) - slot-scope (opens new window)
• Vue RFCs - 0001-new-slot-syntax (opens new window)
• Vue RFCs - 0002-slot-syntax-shorthand (opens new window)
• Vue RFCs - 0003-dynamic-directive-arguments (opens new window)
• Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument (opens new window)
• Vue RFCs - 0011-v-model-api-change (opens new window)
• Vue RFCs - 0040-script-setup (opens new window)
• Vue RFCs - 0043-sfc-style-variables (opens new window)
• Vue RFCs - v-bind .prop shorthand proposal (opens new window)

🚀 Version

This rule was introduced in eslint-plugin-vue v6.1.0

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)