JS.VUE.NO.UNSUPPORTED.FEATURES

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 (https://github.com/npm/node-semver#range-grammar). 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 (https://v3.vuejs.org/api/directives.html#v-memo) 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 (https://v3.vuejs.org/api/special-attributes.html#is)
• Vue.js 3.0.0+
  • "style-css-vars-injection" ... SFC CSS variable injection
  • "script-setup" ... <script setup>
  • "v-model-argument" ... argument on v-model
  • "v-model-custom-modifiers" ... custom modifiers on v-model
  • "v-is" ... v-is (https://v3.vuejs.org/api/directives.html#v-is) directive.
• Vue.js 2.6.0+
  • "dynamic-directive-arguments" ... dynamic directive arguments (https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments).
  • "v-slot" ... v-slot (https://v3.vuejs.org/api/directives.html#v-slot) directive.
• Vue.js 2.5.0+
  • "slot-scope-attribute" ... slot-scope (https://v2.vuejs.org/v2/api/#slot-scope-deprecated) attributes.

{"version": "^2.6.0"}

{'vue/no-unsupported-features': ['error', {'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"}

{'vue/no-unsupported-features': ['error', {'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-memo (https://v3.vuejs.org/api/directives.html#v-memo)
• API - v-is (https://v3.vuejs.org/api/directives.html#v-is)
• API - v-is (Old) (https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)
• Guide - Dynamic Arguments (https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments)
• API - v-slot (https://v3.vuejs.org/api/directives.html#v-slot)
• API (for v2) - slot-scope (https://v2.vuejs.org/v2/api/#slot-scope-deprecated)
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0002-slot-syntax-shorthand.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md
• https://github.com/vuejs/rfcs/pull/18