How do I format currencies in a Vue component

Question

My Vue component is like this     lt template gt       lt div gt           lt div class  panel-group v-for  item in list  gt               lt div class  col-md-8  gt                   lt small gt                     Total   lt b gt    item total    lt  b gt                   lt  small gt               lt  div gt           lt  div gt       lt  div gt   lt  template gt    lt script gt      export default                       computed                list  function                     return this  store state transaction list                                                 lt  script gt    The result of    item total    is      26000000   But I want format it to be like this       26 000 000 00   In jquery or javascript  I can do it  But  How to do it in vue component

User · Answer

I used the custom filter solution proposed by @Jess but in my project we are using Vue together with TypeScript. This is how it looks like with TypeScript and class decorators:

import Component from 'vue-class-component';
import { Filter } from 'vue-class-decorator';

@Component
export default class Home extends Vue {

  @Filter('toCurrency')
  private toCurrency(value: number): string {
    if (isNaN(value)) {
        return '';
    }

    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
  }
}

In this example the filter can only be used inside the component. I haven't tried to implement it as a global filter, yet.

User · Answer

There is issues with the precision of the accepted answer   the round value  decimals  function in this test works  unlike the simple toFixed example   this is a test of the toFixed vs round method   http   www jacklmoore com notes rounding-in-javascript    x000D   x000D    Number prototype format   function n    x000D        return this toFixed Math max 0    n    x000D       x000D    function round value  decimals    x000D      return Number Math round value  e  decimals   e-  decimals   x000D      x000D   x000D       can anyone tell me why these are equivalent for  50 005  and 1050 005 through 8150 005  increments of 50  x000D   x000D    var round to   2  x000D    var maxInt   1500000  x000D    var equalRound     lt h1 gt BEGIN HERE lt  h1 gt  lt div class  matches  gt    x000D    var increment   50  x000D    var round from   0 005  x000D    var expected   0 01  x000D    var lastWasMatch   true  x000D   x000D    for  var n   0  n  lt  maxInt  n n increment   x000D      var data       x000D      var numberCheck   parseFloat n   round from   x000D      data original   numberCheck   1  x000D      data expected    Number n   expected    1  x000D      data formatIt   Number numberCheck  format round to    1  x000D      data roundIt   round numberCheck  round to  toFixed round to    1  x000D      data numberIt   Number numberCheck  toFixed round to    1  x000D        console log data   x000D   x000D      if  data roundIt     data formatIt    data formatIt     data numberIt    x000D         data roundIt     data numberIt    data roundIt    data expected x000D           x000D          if lastWasMatch   x000D            equalRound   equalRound     lt  div gt  lt div class  errors  gt   lt hr  gt  Did Not Round UP  lt hr  gt     x000D              document write    lt h3 gt EXAMPLE  Did Not Round UP      numberCheck     lt  h3 gt  lt br   gt  lt hr  gt      x000D              document write  expected    data expected             typeof data expected       lt br   gt     x000D              document write  format    data formatIt             typeof data formatIt       lt br   gt     x000D              document write  round     data roundIt             typeof data roundIt       lt br   gt     x000D              document write  number    data numberIt             typeof data numberIt       lt br   gt     x000D              lastWasMatch false  x000D            x000D          equalRound   equalRound          numberCheck  x000D        else   x000D          if  lastWasMatch   x000D            equalRound   equalRound     lt  div gt  lt div class  matches  gt   lt hr  gt  All Rounded UP   lt hr  gt     x000D              x000D              lastWasMatch true  x000D            x000D          equalRound   equalRound          numberCheck  x000D        x000D      x000D    document write  equalRound    equalRound     lt  div gt  lt br   gt     x000D   x000D   x000D    mixin example   x000D   x000D    export default   x000D      methods    x000D        roundFormat  function  value  decimals    x000D          return Number Math round value  e  decimals   e-  decimals  toFixed decimals   x000D           x000D        currencyFormat  function  value  decimals  symbol        x000D          return symbol   this roundFormat value 2   x000D          x000D        x000D      x000D   x000D   x000D

User · Answer

I have created a filter   The filter can be used in any page  Vue filter  toCurrency   function  value        if  typeof value      quot number quot             return value            var formatter   new Intl NumberFormat  en-US             style   currency           currency   USD           minimumFractionDigits  0             return formatter format value        Then I can use this filter like this           lt td class  quot text-right quot  gt                 invoice fees   toCurrency             lt  td gt   I used these related answers to help with the implementation of the filter   How to format numbers as currency string  Check whether variable is number or string in JavaScript

User · Answer

With vuejs 2  you could use vue2-filters which does have other goodies as well   npm install vue2-filters   import Vue from  vue  import Vue2Filters from  vue2-filters   Vue use Vue2Filters    Then use it like so      amount   currency       12345   gt   12 345 00   Ref  https   www npmjs com package vue2-filters

User · Answer

Try this  methods        formatPrice value            var formatter   new Intl NumberFormat  en-US                 style   currency               currency   PHP               minimumFractionDigits  2                     return formatter format value             Then you can just call this like     formatPrice item total

User · Answer

You can format currency writing your own code but it is just solution for the moment - when your app will grow you can need other currencies   There is another issue with this    For EN-us - dolar sign is always before currency -  2 00   For selected PL you return sign after amount like 2 00 zl    I think the best option is use complex solution for internationalization e g  library vue-i18n  http   kazupon github io vue-i18n      I use this plugin and I don t have to worry about such a things  Please look at documentation - it is really simple   http   kazupon github io vue-i18n guide number html  so you just use    lt div id  app  gt     lt p gt     n 100   currency      lt  p gt   lt  div gt    and set EN-us to get  100 00    lt div id  app  gt     lt p gt  100 00 lt  p gt   lt  div gt    or set PL to get 100 00 zl    lt div id  app  gt     lt p gt 100 00 zl lt  p gt   lt  div gt    This plugin also provide different features like translations and date formatting

User · Answer

You can use this example  formatPrice value      return value toString   replace    d      d 3       d   g    1

User · Answer

UPDATE  I suggest using a solution with filters  provided by  Jess    I would write a method for that  and then where you need to format price you can just put the method in the template and pass value down  methods        formatPrice value            let val    value 1  toFixed 2  replace                   return val toString   replace   B     d 3       d   g                 And then in template     lt template gt       lt div gt           lt div class  panel-group v-for  item in list  gt               lt div class  col-md-8  gt                   lt small gt                     Total   lt b gt    formatPrice item total     lt  b gt                   lt  small gt               lt  div gt           lt  div gt       lt  div gt   lt  template gt    BTW - I didn t put too much care on replacing and regular expression  It could be improved enter code here   x000D   x000D  Vue filter  tableCurrency   num   gt    x000D    if   num    x000D      return  0 00   x000D      x000D    const number    num   1  toFixed 2  replace            x000D    return number toString   replace   B     d 3       d   g        x000D      x000D   x000D   x000D

User · Answer

The comment by  RoyJ has a great suggestion  In the template you can just use built-in localized strings    lt small gt       Total   lt b gt    item total toLocaleString      lt  b gt   lt  small gt    It s not supported in some of the older browsers  but if you re targeting IE 11 and later  you should be fine

[vue.js] How do I format currencies in a Vue component?

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component

Examples related to vuex