Filters removedbreaking

Overview

Filters are removed from Vue 3.0 and no longer be supported.

2.x Syntax

In 2.x, developers could use filters in order to apply common text formatting.

For example:

  1. <template>
  2.   <h1>Bank Account Balance</h1>
  3.   <p>{{ accountBalance | currencyUSD }}</p>
  4. </template>
  6. <script>
  7.   export default {
  8.     props: {
  9.       accountBalance: {
  10.         type: Number,
  11.         required: true
  12.       }
  13.     },
  14.     filters: {
  15.       currencyUSD(value) {
  16.         return '$' + value
  17.       }
  18.     }
  19.   }
  20. </script>

While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being “just JavaScript,” which has both learning and implementation costs.

3.x Update

In 3.x, filters are removed and no longer supported. Instead, we recommend replacing with method calls or computed properties instead.

Using the example above, here is one example of how it could be implemented.

  1. <template>
  2.   <h1>Bank Account Balance</h1>
  3.   <p>{{ accountInUSD }}</p>
  4. </template>
  6. <script>
  7.   export default {
  8.     props: {
  9.       accountBalance: {
  10.         type: Number,
  11.         required: true
  12.       }
  13.     },
  14.     computed: {
  15.       accountInUSD() {
  16.         return '$' + this.accountBalance
  17.       }
  18.     }
  19.   }
  20. </script>

Migration Strategy

Instead of using filters, we recommend replacing them with computed properties or methods.