Vue Plugin for formatjs

This library contains our plugin for Vue.

Installation#

npm
yarn

npm i -S vue-intl

yarn add -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:

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>