Plugin Vue para formatjs

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Esta biblioteca contém nosso plugin para Vue.

Instalação

npm

npm i -S vue-intl

yarn

yarn add vue-intl

Uso

Inicialize o plugin VueIntl com a mesma configuração IntlConfig documentada em @formatjs/intl.

import {createIntl} from 'vue-intl'

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

A partir daí, você pode utilizar nossas APIs de duas formas:

inject

Ao especificar inject: {intl: intlKey}, você obtém acesso à API completa de IntlFormatters documentada em @formatjs/intl.

Nota: intlKey deve ser importado de vue-intl.

Composition API

Também damos suporte à Composition API do Vue com provideIntl e 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étodos

Você também pode usar nossos formatadores diretamente nos templates Vue prefixando com $, conforme abaixo:

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

Atualmente suportamos:

• $formatMessage

• $formatDate

• $formatTime

• $formatRelativeTime

• $formatTimeRange

• $formatDisplayName

• $formatList

Consulte @formatjs/intl para a lista completa de assinaturas de API.

Ferramentas

A toolchain do formatjs oferece suporte completo a vue:

• eslint-plugin-formatjs: Suporta totalmente .vue, JS e TS.

• @formatjs/cli: Agora extraímos mensagens de arquivos SFC .vue.

• babel-plugin-formatjs: Compila mensagens durante o bundling para babel.

• @formatjs/ts-transformer: Compila mensagens durante o bundling para TypeScript.

Limitações

Usando ICU em Vue SFC

Como }} e {{ são tokens especiais em <template> de arquivos .vue, isso pode causar conflitos com a sintaxe ICU MessageFormat, por exemplo:

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

Note o {# more}} que termina com }}. Isso causará problemas de parsing no seu template vue. Para contornar, recomendamos inserir um espaço transformando }} em } }.

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