Le useTranslate composable

Tout ne rentre pas dans un composant. Les attributs tels que placeholder ou title prennent une chaîne, et parfois tu as besoin d'une traduction dans ton script. Pour cela, utilise la méthode useTranslate composable ou translate.

Le useTranslate composable

useTranslate renvoie une fonction, généralement appelée t, qui traduit une chaîne de caractères :

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

const t = useTranslate();
</script>

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

t renvoie le texte original pendant le chargement de la traduction. Une fois prêt, le composant est refait. Comme le composant <T>, il accepte les options de langue et de formalité :

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

Il accepte également un id, pour modifier lui-même cette utilisation du texte :

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

Variables

Transmet des valeurs qui ne doivent pas être traduites en v et les référencer par $name, comme pour le composant <T> :

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

Le texte est traduit une fois sous la forme Search {0} products, et la traduction mise en cache est réutilisée en cas de modification de count.

useT est le même composable que useTranslate.

Traduire en code

Pour traduire une chaîne de ton script, appelle translate. Cela renvoie une promesse.

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

Sans l'option lang, le texte est traduit dans la langue actuelle.

translate prend également en compte des variables :

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

Les composants extérieurs, par exemple dans un magasin, utilisent directement l'objet renvoyé par createMagicTranslate. Il fournit les mêmes méthodes translate et setLanguage et la même propriété language.