El useTranslate composable

No todo cabe en un componente. Los atributos como placeholder o title toman una cadena y, a veces, necesitas una traducción en el guion. Para ellos, usa el método useTranslate, composable o translate.

El useTranslate composable

useTranslate devuelve una función, normalmente llamada t, que traduce una cadena:

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

const t = useTranslate();
</script>

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

t devuelve el texto original mientras se carga la traducción. Cuando esté listo, el componente se vuelve a renderizar. Al igual que el componente <T>, acepta opciones de idioma y formalidad:

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

También acepta un id, para editar este uso del texto por sí solo:

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

Variables

Pase valores que no deberían traducirse en v y haga referencia a ellos como $name, igual que con el componente <T>:

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

El texto se traduce una vez como Search {0} products y la traducción en caché se reutiliza cuando cambia count.

useT es lo mismo composable que useTranslate.

Traducir en código

Para traducir una cadena de tu guion, llama al translate. Devuelve una promesa.

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'
});

Sin la opción lang, el texto se traduce al idioma actual.

translate también acepta variables:

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

Los componentes externos, por ejemplo, en una tienda, utilizan directamente el objeto devuelto por createMagicTranslate. Proporciona los mismos métodos translate y setLanguage y la misma propiedad language.