noVueDeprecatedFilter (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/noVueDeprecatedFilter
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-filter

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDeprecatedFilter": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the filter syntax that Vue 3 removed.

Vue 2 let you pass a value through a function with a | character, as in {{ price | currency }}. This is called a filter. Vue 3 removed filters, so it reads the | as the bitwise OR operator instead. The template still compiles, but the function is never called, and the page shows a different value.

Call a function instead, for example {{ currency(price) }}, or use a computed property.

This rule reports a | in {{ }} and in v-bind values, unless it is inside parentheses, brackets, or braces.

Examples

Invalid

1
<template>
2
  <p>{{ price | currency }}</p>
3
</template>

code-block.vue:2:9 lint/nursery/noVueDeprecatedFilter ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This expression uses a filter, which Vue 3 no longer supports.
  
    1 │ <template>
  > 2 │   <p>{{ price | currency }}</p>
      │         ^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue 3 reads the | as the bitwise OR operator, so the expression doesn't call the filter.
  
  ℹ Call the filter as a function instead, or move the expression into a computed property.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <a :title="name | capitalize | truncate(20)"></a>
3
</template>

code-block.vue:2:14 lint/nursery/noVueDeprecatedFilter ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This expression uses a filter, which Vue 3 no longer supports.
  
    1 │ <template>
  > 2 │   <a :title="name | capitalize | truncate(20)"></a>
      │              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue 3 reads the | as the bitwise OR operator, so the expression doesn't call the filter.
  
  ℹ Call the filter as a function instead, or move the expression into a computed property.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <p>{{ currency(price) }}</p>
3
  <a :title="truncate(capitalize(name), 20)"></a>
4
  <p>{{ name || "Anonymous" }}</p>
5
  <p>{{ (flags | mask) }}</p>
6
</template>

References

Vue 3 migration guide: Filters