Das useTranslate composable

Nicht alles passt in eine Komponente. Attribute wie placeholder oder title benötigen eine Zeichenfolge, und manchmal benötigst du eine Übersetzung in deinem Drehbuch. Verwende für diese die Methode useTranslate composable oder translate.

Das useTranslate composable

useTranslate gibt eine Funktion zurück, normalerweise t genannt, die eine Zeichenfolge übersetzt:

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

const t = useTranslate();
</script>

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

t gibt den Originaltext zurück, während die Übersetzung geladen wird. Sobald sie fertig ist, wird die Komponente erneut gerendert. Wie die Komponente <T> akzeptiert sie Sprach- und Formalitätsoptionen:

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

Es akzeptiert auch ein id, um diese Verwendung des Textes eigenständig zu bearbeiten:

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

Variablen

Übergib Werte, die nicht in v übersetzt werden sollten, und referenziere sie als $name, genau wie bei der <T>-Komponente:

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

Der Text wird einmal als Search {0} products übersetzt und die zwischengespeicherte Übersetzung wird wiederverwendet, wenn sich count ändert.

useT ist dasselbe composable wie useTranslate.

Im Code übersetzen

Um eine Zeichenfolge in deinem Drehbuch zu übersetzen, rufe translate an. Es gibt ein Versprechen zurück.

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

Ohne die Option lang wird der Text in die aktuelle Sprache übersetzt.

translate akzeptiert auch Variablen:

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

Externe Komponenten, zum Beispiel in einem Geschäft, verwende das von createMagicTranslate zurückgegebene Objekt direkt. Es bietet dieselben translate- und setLanguage-Methoden und die Eigenschaft language.