Skip to main content

Vue Plugin for formatjs

This library contains our plugin for Vue.

Installation#

npm i -S vue-intl

Usage#

Initialize VueIntl plugin with the same IntlConfig documented in @formatjs/intl.

import {createIntl} from 'vue-intl'
const app = createApp(App)app.use(  createIntl({    locale: 'en',    defaultLocale: 'en',    messages: {      foo: 'bar',    },  }))

From there you can use our APIs in 2 ways:

inject#

By specifying inject: {intl: intlKey}, you can use the full IntlFormatters API documented in @formatjs/intl.

Note: intlKey needs to be imported from vue-intl.

Composition API#

We also support Vue's Composition API with provideIntl & useIntl.

import {createIntl} from '@formatjs/intl'import {provideIntl, useIntl} from 'vue-intl'
const Ancestor = {  setup() {    provideIntl(      createIntl({        locale: 'en',        defaultLocale: 'en',        messages: {          foo: 'Composed',        },      })    )  },  render() {    return h(Descendant)  },}
const Descendant = {  setup() {    const intl = useIntl()    return () =>      h(        'p',        {},        intl.formatMessage({          id: 'foo',          defaultMessage: 'Hello',        })      )  },}

Methods#

You can also use our formatters in Vue template by prepending $ like below:

<template>  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p></template>

We currently support:

  • $formatMessage
  • $formatDate
  • $formatTime
  • $formatRelativeTime
  • $formatTimeRange
  • $formatDisplayName
  • $formatList

See @formatjs/intl for the full list of API signatures.

Tooling#

formatjs toolchain fully supports vue:

Caveats#

Using ICU in Vue SFC#

Since }} & {{ are special tokens in .vue <template>, this can cause potential conflict with ICU MessageFormat syntax, e.g:

<template>  <p>    {{ $formatMessage({ defaultMessage: '{count, selectordinal, offset:1 one {#}    other {# more}}', }) }}  </p></template>

Notice the {# more}} where it ends with }}. This will cause parsing issue in your vue template. In order to work around this issue, we recommend using space to turn }} into } }.

<template>  <p>    {{      $formatMessage({        defaultMessage:          '{count, selectordinal, offset:1 one {#} other {# more} }',      })    }}  </p></template>