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

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>