Plugin Vue pour formatjs

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Cette bibliothèque contient notre plugin pour Vue.

Installation

npm

npm i -S vue-intl

yarn

yarn add vue-intl

Utilisation

Initialisez le plugin VueIntl avec la même configuration IntlConfig documentée dans @formatjs/intl.

import {createIntl} from 'vue-intl'

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

À partir de là, vous pouvez utiliser nos API de 2 manières :

inject

En spécifiant inject: {intl: intlKey}, vous accédez à toute l'API IntlFormatters documentée dans @formatjs/intl.

Note : intlKey doit être importé depuis vue-intl.

Composition API

Nous prenons également en charge la Composition API de Vue avec provideIntl et 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',
        })
      )
  },
}

Méthodes

Vous pouvez aussi utiliser nos formateurs dans les templates Vue en ajoutant le préfixe $, comme ceci :

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

Nous prenons actuellement en charge :

• $formatMessage

• $formatDate

• $formatTime

• $formatRelativeTime

• $formatTimeRange

• $formatDisplayName

• $formatList

Voir @formatjs/intl pour la liste complète des signatures d'API.

Outillage

La chaîne d'outils formatjs prend pleinement en charge vue :

• eslint-plugin-formatjs : Prend totalement en charge .vue et JS/TS.

• @formatjs/cli : Nous extrayons désormais les messages des fichiers SFC .vue.

• babel-plugin-formatjs : Compile les messages lors du bundling pour babel.

• @formatjs/ts-transformer : Compile les messages lors du bundling pour TypeScript.

Limites connues

Utilisation d'ICU dans les SFC Vue

Puisque }} et {{ sont des tokens spéciaux dans les <template> .vue, cela peut causer des conflits avec la syntaxe ICU MessageFormat, par exemple :

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

Notez le {# more}} qui se termine par }}. Cela provoquera des erreurs d'analyse dans votre template vue. Pour contourner ce problème, nous recommandons d'insérer un espace pour transformer }} en } }.

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