Question

How do you implement Number localization?

Answer 1

You can localize the number with definition formats(e.g. currency, etc)

Lets follow below steps to localize numbers,

1. You need to add definition formats. For example, lets add it for English and Japanese locales

   const numberFormats = {
     'en-US': {
       currency: {
         style: 'currency', currency: 'USD'
       }
     },
     'ja-JP': {
       currency: {
         style: 'currency', currency: 'JPY', currencyDisplay: 'symbol'
       }
     }
   }
   
2. After that specify the numberFormats option of VueI18n constructor

   const i18n = new VueI18n({
     numberFormats
   })
   
   new Vue({
     i18n
   }).$mount('#app')
3. Now let's configure them in template

   <div id="app">
     <p>{{ $n(10, 'currency') }}</p>
     <p>{{ $n(50, 'currency', 'ja-JP') }}</p>
   </div>
4. Finally it outputs the result

   <div id="app">
     <p>$10.00</p>
     <p>￥50</p>
   </div>