v-intl.

v-intl formats numbers, dates, lists and names for Vue 3 with the browser’s own Intl API. No message files, no runtime.

12,34,567.89
pnpm add @vinayakkulkarni/v-intl
Try every component ↓

01

Numbers and currency

<VIntlNumberFormat>

Grouping, decimals, currency symbols, percentages, compact and unit notation, all from Intl.NumberFormat.

MDN reference ↗
style
currency
₹12,34,567.89
<VIntlNumberFormat
  :payload='1234567.891'
  :format='{
    "locales": "en-IN",
    "options": {
      "style": "currency",
      "currency": "INR"
    }
  }'
/>

02

Dates and times

<VIntlDateTimeFormat>

One instant, written the way each locale reads it, in any IANA time zone.

MDN reference ↗
dateStyle
timeZone
Saturday, 24 October 2026 at 3:00 pm
<VIntlDateTimeFormat
  :payload="new Date('2026-10-24T09:30:00Z')"
  :format='{
    "locales": "en-IN",
    "options": {
      "dateStyle": "full",
      "timeStyle": "short",
      "timeZone": "Asia/Kolkata"
    }
  }'
/>

03

Relative time

<VIntlRelativeTimeFormat>

“Yesterday”, “in 3 weeks”, “2 hours ago”. Set numeric: 'auto' for the words people say.

MDN reference ↗
number
unit
numeric
yesterday
<VIntlRelativeTimeFormat
  :payload='{"number":-1,"time":"day"}'
  :format='{
    "locales": "en-IN",
    "options": {
      "numeric": "auto"
    }
  }'
/>

04

Lists

<VIntlListFormat>

Joins items with the right separators and the right “and” or “or” for the locale.

MDN reference ↗
type
style
Mumbai, Berlin, Tokyo and Cairo
<VIntlListFormat
  :payload='["Mumbai","Berlin","Tokyo","Cairo"]'
  :format='{
    "locales": "en-IN",
    "options": {
      "type": "conjunction",
      "style": "long"
    }
  }'
/>

05

Display names

<VIntlDisplayNames>

Turns region, language, currency and script codes into names, written in the reader’s language.

MDN reference ↗
type
  • IN
    India
  • DE
    Germany
  • JP
    Japan
  • EG
    Egypt
  • BR
    Brazil
<VIntlDisplayNames
  payload="IN"
  :format='{
    "locales": "en-IN",
    "options": {
      "type": "region"
    }
  }'
/>

06

Durations

<VIntlDurationFormat>

Hours, minutes and seconds as words or as a clock. Ships a FormatJS polyfill for browsers without Intl.DurationFormat.

MDN reference ↗
style
2 hours, 46 minutes, 40 seconds
<VIntlDurationFormat
  :payload='{"hours":2,"minutes":46,"seconds":40}'
  :format='{
    "locales": "en-IN",
    "options": {
      "style": "long"
    }
  }'
/>