Documentação

O componente <T>

Embrulhe seu conteúdo no componente <T> para traduzi-lo. O conteúdo original é exibido até que a tradução seja carregada.

<T>This content will be translated</T>

Texto com encadernações também funciona. O conteúdo é traduzido novamente sempre que muda, por exemplo, quando name muda:

<T>Hello {{ name }}</T>

Para valores que mudam com frequência, como nomes e contagens, use variáveis para que o texto seja traduzido apenas uma vez.

Todas as traduções solicitadas ao mesmo tempo são enviadas para a API em uma única solicitação, e as traduções são armazenadas em cache. Você pode usar quantos componentes <T> quiser.

O plugin registra <T> globalmente. Você também pode importá-lo: import { T } from '@magic-translate/vue'. Translate é o mesmo componente de T.

Props

PropTipoDescrição
formality'informal' | 'formal'Define a formalidade da tradução.
idstringPermite que você edite esse uso do texto sozinho.
langLanguageSubstitui o idioma definido por createMagicTranslate.
vRecord<string, unknown>Valores que não estão traduzidos, referenciados como $name no conteúdo. Consulte Variáveis.
<T lang="fr" formality="formal">How are you?</T>

Variáveis

Passe valores que mudam, como um nome ou uma contagem, em v e faça referência a eles como $name no conteúdo:

<T :v="{ name: user.name, count }">Hi $name, you have $count new messages</T>

Magic Translate traduz o texto em torno dos valores uma vez, como Hi {0}, you have {1} new messages, e coloca os valores de volta no seu aplicativo. A tradução é armazenada em cache e funciona para cada nome e cada contagem, e os valores em si nunca são enviados para Magic Translate. Quando somente os valores mudam, nenhuma nova solicitação é feita.

Os valores são numerados na ordem em que aparecem pela primeira vez. A tradução pode movê-los para onde o idioma precisar deles, por exemplo, {1} neue Nachrichten für {0}. O texto ao redor dos valores pode conter HTML:

<T :v="{ count: cart.items.length }">You have <b>$count items</b> in your cart.</T>

Algumas regras:

  • Somente as teclas de v são substituídas, então textos como $5 permanecem como estão. Se duas teclas começarem da mesma forma, como count e counts, a mais longa vence.
  • O mesmo nome pode aparecer mais de uma vez.
  • Os valores são inseridos como texto, nunca como HTML. Em vez disso, coloque marcação no texto ao redor deles: Hi <b>$name</b>.
  • As variáveis são substituídas somente no texto, não em atributos como href ou title.
  • Uma chave que não aparece no texto registra um aviso, que detecta erros de digitação.
  • Com a renderização do lado do servidor, por exemplo, com Nuxt, um <T> com v é renderizado vazio no servidor e aparece quando o aplicativo é executado no navegador.

Limitações

  1. Você não pode colocar componentes Vue dentro do componente <T>. Elementos HTML simples funcionam bem (veja o exemplo abaixo) e os estilos com escopo continuam funcionando neles.
  2. O conteúdo dentro de um componente <T> não pode exceder 10 KB, o que equivale a cerca de 5.000 caracteres.
<!-- this is OK, since <a> is a plain HTML element -->
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>


<!-- this does NOT work, since <MyButton> is a Vue component -->
<T>
  <MyButton>Click me</MyButton>
</T>

Para traduzir atributos e outras cadeias de caracteres, use o useTranslate composable.

AnteriorVuePróximoO useTranslate composable