Vue3 does not support Filters filters

The filters filter has been removed from Vue 3.0 and is no longer supported.

2. x syntax

In 2. x, developers can use filters to handle common text formats.

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  filters: {
   currencyUSD(value) {
    return '$' + value
   }
  }
 }
</script>

Although this may seem convenient, it requires a custom syntax, breaking the principle of "just JavaScript" in curly braces, which increases the cost of learning and implementing logic.

3. x update

In 3. x, the filter is removed and is no longer supported. Instead, we suggest replacing them with method calls or evaluated properties.

The following example is one that implements similar functions.

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountInUSD }}</p>
</template>

<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  computed: {
   accountInUSD() {
    return '$' + this.accountBalance
   }
  }
 }
</script>

The official suggestion is to replace filters with calculated attributes or methods instead of using filters.