Dokumentation

Die <T>-Komponente

Binde deinen Inhalt in die Komponente <T> ein, um ihn zu übersetzen. Der Originalinhalt wird angezeigt, bis die Übersetzung geladen ist.

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

Text mit Bindungen funktioniert auch. Der Inhalt wird immer wieder übersetzt, wenn er sich ändert, zum Beispiel wenn sich name ändert:

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

Für Werte, die sich häufig ändern, wie Namen und Zählungen, verwende stattdessen Variablen, sodass der Text nur einmal übersetzt wird.

Alle gleichzeitig angeforderten Übersetzungen werden in einer einzigen Anfrage an die API gesendet und die Übersetzungen werden zwischengespeichert. Du kannst so viele <T>-Komponenten verwenden, wie du möchtest.

Das Plugin registriert <T> weltweit. Du kannst es auch importieren: import { T } from '@magic-translate/vue'. Translate ist dieselbe Komponente wie T.

Props

PropTypBeschreibung
formality'informal' | 'formal'Legt die Formalität der Übersetzung fest.
idstringErmöglicht es dir, diese Verwendung des Textes eigenständig zu bearbeiten.
langLanguageÜberschreibt die mit createMagicTranslate eingestellte Sprache.
vRecord<string, unknown>Werte, die nicht übersetzt sind, werden im Inhalt als $name referenziert. Siehe Variablen.
<T lang="fr" formality="formal">How are you?</T>

Variablen

Übergib Werte, die sich ändern, wie einen Namen oder eine Anzahl, in v und referenziere sie im Inhalt als $name:

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

Magic Translate übersetzt den Text rund um die Werte einmal, als Hi {0}, you have {1} new messages, und fügt die Werte wieder in deine App ein. Die Übersetzung ist zwischengespeichert und funktioniert für jeden Namen und jede Anzahl, und die Werte selbst werden niemals an Magic Translate gesendet. Wenn sich nur die Werte ändern, wird keine neue Anfrage gestellt.

Die Werte sind in der Reihenfolge nummeriert, in der sie zuerst erscheinen. Die Übersetzung kann sie dorthin bewegen, wo die Sprache sie braucht, zum Beispiel {1} neue Nachrichten für {0}. Der Text rund um die Werte kann HTML enthalten:

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

Ein paar Regeln:

  • Nur Schlüssel von v werden ersetzt, sodass Text wie $5 so bleibt, wie er ist. Wenn zwei Schlüssel auf dieselbe Weise beginnen, wie count und counts, gewinnt die längste.
  • Derselbe Name kann mehr als einmal vorkommen.
  • Werte werden als Text eingefügt, niemals als HTML. Füge stattdessen Markup in den Text um sie herum ein: Hi <b>$name</b>.
  • Variablen werden nur im Text ersetzt, nicht in Attributen wie href oder title.
  • Eine Taste, die nicht im Text vorkommt, protokolliert eine Warnung, die Tippfehler auffängt.
  • Beim serverseitigen Rendern, zum Beispiel mit Nuxt, wird ein <T> mit v auf dem Server leer gerendert und erscheint, sobald die App im Browser läuft.

Einschränkungen

  1. Du kannst keine Vue-Komponenten in die Komponente <T> setzen. Einfache HTML-Elemente sind in Ordnung (siehe das Beispiel unten), und bereichsbezogene Stile funktionieren weiter daran.
  2. Der Inhalt einer <T>-Komponente darf 10 KB nicht überschreiten, was etwa 5.000 Zeichen entspricht.
<!-- 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>

Um Attribute und andere Zeichenketten zu übersetzen, verwende useTranslate composable.

BisherigeVueAls NächstesDas useTranslate composable