0Pricing
Vue Academy · Lesson

Number, Date, and Currency Formatting

n() for numbers, d() for dates, datetime formats, numberFormats per locale.

Numbers and Dates Vary by Locale

1,000.50 in the US is 1.000,50 in much of Europe. Dates and currencies differ too. Vue I18n wraps the browser Intl APIs so numbers, dates, and money render correctly per locale.

Configuring numberFormats

Define named number formats per locale in the numberFormats option of createI18n. Each named format is an Intl.NumberFormat options object.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

All lessons in this course

  1. vue-i18n Setup and Message Files
  2. useI18n Composable and t() Function
  3. Pluralization and Linked Messages
  4. Number, Date, and Currency Formatting
← Back to Vue Academy