O `useTranslate` composable

Nem tudo cabe em um componente. Atributos como placeholder ou title usam uma string e, às vezes, você precisa de uma tradução em seu script. Para isso, use o método useTranslate composable ou translate.

O `useTranslate` composable

useTranslate retorna uma função, geralmente chamada t, que traduz uma string:

<script setup lang="ts">
import { useTranslate } from '@magic-translate/vue';

const t = useTranslate();
</script>

<template>
  <input :placeholder="t('Search products')" />
</template>

t retorna o texto original enquanto a tradução é carregada. Quando estiver pronto, o componente é renderizado novamente. Como o componente <T>, ele aceita opções de idioma e formalidade:

<input :placeholder="t('Your name', { lang: 'fr', formality: 'formal' })" />

Ele também aceita um id, para editar esse uso do texto sozinho:

<button :title="t('Save', { id: 'checkout-save' })" />

Variáveis

Passe valores que não devem ser traduzidos em v e faça referência a eles como $name, da mesma forma que com o componente <T>:

<input :placeholder="t('Search $count products', { v: { count } })" />

O texto é traduzido uma vez como Search {0} products e a tradução em cache é reutilizada quando count muda.

useT é o mesmo composable que useTranslate.

Traduzindo em código

Para traduzir uma string em seu script, chame translate. Ele retorna uma promessa.

import { useMagicTranslate } from '@magic-translate/vue';

const magicTranslate = useMagicTranslate();
const message = await magicTranslate.translate('Your order has been placed');

// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

Sem a opção lang, o texto é traduzido para o idioma atual.

translate também usa variáveis:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});

Componentes externos, por exemplo, em uma loja, usam diretamente o objeto retornado por createMagicTranslate. Ele fornece os mesmos métodos translate e setLanguage e a propriedade language.

O useTranslate composable