Vue Plugin for formatjs

This library contains our plugin for Vue.

Installation#

npm
yarn

npm i -S vue-intl

Usage#

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

import VueIntl from 'vue-intl'

const app = createApp(App)
app.use(VueIntl, {
  locale: 'en',
  defaultLocale: 'en',
  messages: {
    foo: 'bar',
  },
})

From there you can use our APIs in 2 ways:

inject#

By specifying inject: ['intl'], you can use the full IntlFormatters API documented in @formatjs/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:

eslint-plugin-formatjs: This fully supports .vue and JS/TS.
@formatjs/cli: We now support extracting messages from .vue SFC files.
babel-plugin-formatjs: Compile messages during bundling for babel.
@formatjs/ts-transformer: Compile messages during bundling for TypeScript.

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>