Sometimes, we want to format currencies in a Vue.js component.

In this article, we’ll look at how to format currencies in a Vue.js component.

How to format currencies in a Vue.js component?

To format currencies in a Vue.js component, we can create our own filter.

For instance, we write

Vue.filter("toCurrency", (value) => {
  if (typeof value !== "number") {
    return value;
  }
  const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  });
  return formatter.format(value);
});

to create the toCurrency filter with Vue.filter.

In it, we use the Intl.NumberFormat constructor to return a currency string converted from the number by calling formatter.format with value.

We set the the style to 'currency' to format the number into a currency string.

Then we can use it in our component by writing

<template>
  <div>
    <div class="text-right">
      {{ invoice.fees | toCurrency }}
    </div>
  </div>
</template>

Conclusion

To format currencies in a Vue.js component, we can create our own filter.