JS.VUE.NO.DEPRECATED.FILTER

Rule Details

This rule reports deprecated filters syntax (removed in Vue.js v3.0.0+).

See Migration Guide - Filters (https://v3-migration.vuejs.org/breaking-changes/filters.html) for more details.

{'vue/no-deprecated-filter': ['error']}

<template>
  <!-- GOOD -->
  {{ filter(msg) }}
  {{ filter(msg, '€') }}
  {{ filterB(filterA(msg)) }}
  <div v-bind:id="filter(msg)"></div>
  <div v-bind:id="filter(msg, '€')"></div>
  <div v-bind:id="filterB(filterA(msg))"></div>

  <!-- BAD -->
  {{ msg | filter }}
  {{ msg | filter('€') }}
  {{ msg | filterA | filterB }}
  <div v-bind:id="msg | filter"></div>
  <div v-bind:id="msg | filter('€')"></div>
  <div v-bind:id="msg | filterA | filterB"></div>
</template>

Do not disable "parserOptions.vueFeatures.filter" (https://github.com/vuejs/vue-eslint-parser#parseroptionsvuefeaturesfilter) to use this rule.

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "vueFeatures": {
      "filter": false // Don't!!
    }
  }
}

Options

Nothing.

Further Reading

• Migration Guide - Filters (https://v3-migration.vuejs.org/breaking-changes/filters.html)
• Vue RFCs - 0015-remove-filters (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md)