CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-i18n
itsliamoco
itsliamoco

Reputation: 1048

Vue i18n format USD currency

When I display my currency in USD the output is always in the format USD$500.00.

I am trying to remove the USD prefix from the start.

This is my numberFormats config:

numberFormats: {
    'en': {
        currency: {
            style: 'currency', currency: 'GBP'
        }
    },
    'us': {
        currency: {
            style: 'currency',
            currency: 'USD',
            currencyDisplay: 'symbol'
        }       
    }
}

I display the currency by doing {{ $n(500, 'currency') }}.

Upvotes: 1

Views: 2557

Answers (2)

emmanuelle
emmanuelle

Reputation: 11

Change symbole by narrowSymbol like this :

numberFormats: {
    'en': {
        currency: {
            style: 'currency', currency: 'GBP'
        }
    },
    'us': {
        currency: {
            style: 'currency',
            currency: 'USD',
            currencyDisplay: 'narrowSymbol'
        }       
    }
}

Upvotes: 1

Etheryte
Etheryte

Reputation: 25310

You need to use the format en-US to specify the configuration.

As covered in the docs, Vue I18n uses Intl.NumberFormat to format numbers which relies on ISO 4217 currency codes. 

const i18n = new VueI18n({
  locale: 'en-US',
  numberFormats: {
    'en-US': {
      currency: {
        style: 'currency',
        currency: 'USD',
        currencyDisplay: 'symbol'
      }
    }
  },
})

new Vue({
  i18n
}).$mount('#app')
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="app">
  {{ $n(500, 'currency') }}
</div>

Upvotes: 2

Related Questions