# vue/no-unsupported-features
disallow unsupported Vue.js syntax on the specified version
- 🔧 The
--fixoption 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... Theversionoption accepts the valid version range ofnode-semver(opens new window). Set the version of Vue.js you are using. This option is required.ignores... You can use thisignoresoption to ignore the given features. The"ignores"option accepts an array of the following strings.- Vue.js 3.1.0+
"is-attribute-with-vue-prefix"...isattribute withvue:prefix (opens new window)
- Vue.js 3.0.0+
"script-setup"...<script setup>(opens new window)"v-model-argument"... argument onv-model(opens new window)"v-model-custom-modifiers"... custom modifiers onv-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.
- Vue.js
">=2.6.0-beta.1 <=2.6.0-beta.3"or 2.6 custom build"v-bind-prop-modifier-shorthand"...v-bindwith.propmodifier shorthand.
- Vue.js 3.1.0+
# {"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>
# {"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>
# 📚 Further Reading
- 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 - v-bind .prop shorthand proposal (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v6.1.0