Il useTranslate composable

Non tutto rientra in un componente. Attributi come placeholder o title richiedono una stringa e a volte hai bisogno di una traduzione nel tuo script. Per questi, usa il metodo useTranslate composable o translate.

Il useTranslate composable

useTranslate restituisce una funzione, solitamente chiamata t, che traduce una stringa:

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

const t = useTranslate();
</script>

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

t restituisce il testo originale durante il caricamento della traduzione. Una volta pronto, il componente viene nuovamente renderizzato. Come il componente <T>, accetta opzioni linguistiche e formali:

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

Accetta anche un id, per modificare questo uso del testo da solo:

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

Variabili

Passa valori che non devono essere tradotti in v e fai riferimento ad essi come $name, lo stesso del componente <T>:

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

Il testo viene tradotto una volta come Search {0} products e la traduzione memorizzata nella cache viene riutilizzata quando count cambia.

useT è lo stesso composable di useTranslate.

Tradurre in codice

Per tradurre una stringa nel tuo script, chiama translate. Restituisce una 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'
});

Senza l'opzione lang, il testo viene tradotto nella lingua corrente.

translate accetta anche delle variabili:

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

I componenti esterni, ad esempio in un negozio, utilizzano direttamente l'oggetto restituito da createMagicTranslate. Fornisce gli stessi metodi translate e setLanguage e la stessa proprietà language.