El componente <T>

Incluye tu contenido en el componente <T> para traducirlo. El contenido original se muestra hasta que se cargue la traducción.

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

El texto con encuadernaciones también funciona. El contenido se vuelve a traducir cada vez que cambia, por ejemplo, cuando name cambia:

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

Para los valores que cambian con frecuencia, como los nombres y los recuentos, utiliza variables en su lugar para que el texto solo se traduzca una vez.

Todas las traducciones solicitadas al mismo tiempo se envían a la API en una sola solicitud y las traducciones se almacenan en caché. Puedes usar tantos componentes de <T> como quieras.

El complemento registra el puesto <T> a nivel mundial. También puedes importarlo: import { T } from '@magic-translate/vue'. Translate es el mismo componente que T.

Props

<T lang="fr" formality="formal">How are you?</T>

Variables

Pase los valores que cambien, como un nombre o un recuento, en v y haga referencia a ellos como $name en el contenido:

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

Magic Translate traduce el texto alrededor de los valores una vez, como Hi {0}, you have {1} new messages, y vuelve a poner los valores en tu aplicación. La traducción está en caché y funciona para todos los nombres y todos los recuentos, y los valores en sí mismos nunca se envían a Magic Translate. Cuando solo cambian los valores, no se hace ninguna solicitud nueva.

Los valores están numerados en el orden en que aparecen por primera vez. La traducción puede llevarlos a donde el idioma los necesite, por ejemplo, {1} neue Nachrichten für {0}. El texto que rodea a los valores puede contener HTML:

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

Algunas reglas:

• Solo se sustituyen las teclas v, por lo que el texto como $5 permanece como está. Si dos teclas comienzan de la misma manera, como count y counts, gana la más larga.
• El mismo nombre puede aparecer más de una vez.
• Los valores se insertan como texto, nunca como HTML. En su lugar, pon marcas en el texto que las rodea: Hi <b>$name</b>.
• Las variables se sustituyen solo en texto, no en atributos como href o title.
• Una clave que no aparece en el texto registra una advertencia que detecta errores tipográficos.
• Con la renderización del lado del servidor, por ejemplo con Nuxt, un <T> con v aparece vacío en el servidor y aparece cuando la aplicación se ejecuta en el navegador.

Limitaciones

1. No puedes poner los componentes Vue dentro del componente <T>. Los elementos HTML simples están bien (consulta el siguiente ejemplo) y los estilos con ámbito siguen funcionando en ellos.
2. El contenido de un componente <T> no puede superar los 10 KB, es decir, unos 5000 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 traducir atributos y otras cadenas, usa el useTranslate composable.