vue.js logo

Using Filters for Text Formatting


Although filters were removed in Vue 3, you can still achieve similar functionality with computed properties or methods, which are more performant and versatile. Filters are useful for formatting text, numbers, dates, etc., directly within your templates.


<template>
        <div>
          {{ formatPrice(price) }}
        </div>
      </template>

      <script>
      export default {
        data() {
          return {
            price: 2000
          };
        },
        methods: {
          formatPrice(value) {
            return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
          }
        }
      }
      </script>