`useTranslate` composable

すべてがコンポーネントに収まるわけではない。placeholder や title などの属性には文字列が必要だが、時にはスクリプトの翻訳が必要になることもある。これらには、useTranslate composable または translate メソッドを使う。

`useTranslate` composable

useTranslate は、文字列を変換する関数（通常は t と呼ばれる）を返す：

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

const t = useTranslate();
</script>

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

t は、翻訳が読み込まれている間、元のテキストを返す。準備が整うと、コンポーネントは再レンダリングされる。<T> コンポーネントと同様に、言語と形式のオプションを受け入れる:

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

このテキストの使用法を単独で編集するには id も使える:

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

変数

v に翻訳してはいけない値を渡して、<T> コンポーネントと同じように $name として参照する。

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

テキストは Search {0} products として一度翻訳され、count が変更されるとキャッシュされた翻訳が再利用される。

useT は useTranslate と composable と同じ。

コードに翻訳する

スクリプト内の文字列を翻訳するには、translate を呼び出して。それは約束を返すよ。

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

lang オプションがないと、テキストは現在の言語に翻訳される。

translate は変数も取る:

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

店舗などの外部コンポーネントは、createMagicTranslate によって返されたオブジェクトを直接使用する。同じ translate と setLanguage のメソッドと language プロパティを提供する。

useTranslate composable