Vue Plugin for formatjs
This library contains our plugin for Vue.
#
Installation- npm
- yarn
#
UsageInitialize VueIntl
plugin with the same IntlConfig
documented in @formatjs/intl.
From there you can use our APIs in 2 ways:
#
injectBy specifying inject: ['intl']
, you can use the full IntlFormatters
API documented in @formatjs/intl.
#
Composition APIWe also support Vue's Composition API with provideIntl
& useIntl
.
#
MethodsYou can also use our formatters in Vue template by prepending $
like below:
We currently support:
$formatMessage
$formatDate
$formatTime
$formatRelativeTime
$formatTimeRange
$formatDisplayName
$formatList
See @formatjs/intl for the full list of API signatures.
#
Toolingformatjs
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 SFCSince }}
& {{
are special tokens in .vue
<template>
, this can cause potential conflict with ICU MessageFormat syntax, e.g:
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 } }
.