How can you get the currency symbol from vue-i18n

Question

I would like to display the currency symbol depending the locale

    <p>Every {{ $n(null, 'currency') }} you invest</p>

I would like to display

    <p>Every $ you invest</p>

or

    <p>Every £ you invest</p>

ect...

and have a way to display the name as well:

    <p>Every dollar you invest</p>

save it as dynamic value in vue-i18n – samayo Dec 29 '17 at 19:24 — samayo, Dec 29 '17 at 19:24
could you please provide a simple example? – Matteo Gilardoni Dec 29 '17 at 19:44 — Matteo Gilardoni, Dec 29 '17 at 19:44

score 4 · Answer 1 · answered Dec 30 '17 at 23:05

Save currency symbol inside translations messages

VueI18n setup

const messages = {
    "en-GB": { currencySymbol: "£" },
    "en-US": { currencySymbol: "$" }
}

export default new VueI18n({
    messages
})

component html

<p>{{ $t('currencySymbol') }}</p>

score 3 · Answer 2 · answered Dec 30 '17 at 00:46

I know it's not using vue-i18n but you could just use the built in es5 Intl library:

let formatter = new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP',
  minimumFractionDigits: 2
})
return formatter.format('0')[0] // Would return the first digit which is the currency symbol.

score 1 · Answer 3 · answered Aug 12 '21 at 05:49

Your answer is here: https://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting

const numberFormats = {
  'en-US': {
    currency: {
      style: 'currency',
      currency: 'USD'
    }
  },
  'ja-JP': {
    currency: {
      style: 'currency',
      currency: 'JPY',
      currencyDisplay: 'symbol'
    }
  }
}

const i18n = new VueI18n({
  numberFormats
})

new Vue({
  i18n
}).$mount('#app')

Template the below:

<div id="app">
      <p>{{ $n(100, 'currency') }}</p>
      <p>{{ $n(100, 'currency', 'ja-JP') }}</p>
</div>

Output the below:

<div id="app">
  <p>$100.00</p>
  <p>￥100</p>
</div>

score 0 · Answer 4 · answered Aug 06 '22 at 20:36

Here's a hacky technique that can be used in your template:

    <i18n-n tag="span" :value="0" :format="{ key: 'currency', currency: 'USD' }">
        <template #currency="slotProps">
            <span>{{ slotProps.currency }}</span>
        </template>
        <template #integer="slotProps">
            <span style="display:none">{{ slotProps.integer }}</span>
        </template>
        <template #group="slotProps">
            <span style="display:none">{{ slotProps.group }}</span>
        </template>
        <template #decimal="slotProps">
            <span style="display:none">{{ slotProps.decimal }}</span>
        </template>
        <template #fraction="slotProps">
            <span style="display:none">{{ slotProps.fraction }}</span>
        </template>
    </i18n-n>

Documented here. I believe this answers the OP's question about how to only show the currency symbol using vue-i18n.

How can you get the currency symbol from vue-i18n

4 Answers4