no-unsupported-features.md

Pattern: Unsupported Vue.js syntax

Issue: -

Description

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. 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 2.6.0+
    • "dynamic-directive-arguments" ... dynamic directive arguments.
    • "v-slot" ... v-slot directive.
  • Vue.js 2.5.0+
    • "slot-scope-attribute" ... slot-scope attributes.
  • Vue.js ">=2.6.0-beta.1 <=2.6.0-beta.3" or 2.6 custom build
    • "v-bind-prop-modifier-shorthand" ... v-bind with .prop modifier shorthand.

{"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

• eslint-plugin-vue - no-unsupported-features