<T> コンポーネント

翻訳するには、コンテンツを <T> コンポーネントで囲んで。翻訳が読み込まれるまで、元のコンテンツが表示される。

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

バインディング付きのテキストも使える。コンテンツは、name が変更された場合など、変更されるたびに再度翻訳される。

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

名前やカウントなど、頻繁に変更される値については、代わりに変数を使用して、テキストが一度だけ翻訳される。

同時にリクエストされたすべての翻訳は、1回のリクエストでAPIに送信され、翻訳はキャッシュされる。<T> コンポーネントは好きなだけ使える。

プラグインは <T> をグローバルに登録する。インポートすることもできる:import { T } from '@magic-translate/vue'.Translate は T と同じコンポーネントだ。

Props

<T lang="fr" formality="formal">How are you?</T>

変数

名前やカウントなど、変化する値を v に渡し、内容では $name として参照する:

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

Magic Translate は、値の周りのテキストを Hi {0}, you have {1} new messages として一度翻訳し、値をアプリに戻す。翻訳はキャッシュされ、すべての名前とすべてのカウントで機能し、値自体が Magic Translate に送信されることはない。値だけが変わると、新しいリクエストは行われない。

値には最初に表示された順序で番号が付けられている。翻訳は、{1} neue Nachrichten für {0} のように、言語で必要な場所に移動できる。値の周りのテキストにはHTMLを含めることができる：

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

いくつかのルール：

• v のキーだけが置き換えられるので、$5 などのテキストはそのまま残る。count と counts のように、2つのキーが同じように始まる場合は、最も長いキーが優先される。
• 同じ名前が複数回表示されることもある。
• 値はHTMLではなくテキストとして挿入される。代わりに、周囲のテキストにマークアップを入れて:Hi <b>$name</b>.
• 変数はテキストでのみ置換され、href や title などの属性では置換されない。
• テキストに表示されていないキーは警告を記録し、タイプミスをキャッチする。
• たとえば Nuxt とサーバー側のレンダリングでは、v の付いた <T> はサーバー上で空にレンダリングされ、アプリがブラウザーで実行されると表示されるよ。

制限事項

1. Vue コンポーネントを <T> コンポーネントの中に入れることはできない。プレーンなHTML要素でも問題ない（下の例を参照）、スコープスタイルはその要素で引き続き機能する。
2. <T> コンポーネント内のコンテンツは、10 KB、つまり約5,000文字を超えてはいけない。

<!-- 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>

属性やその他の文字列を翻訳するには、useTranslate composable を使う。