Документация

Компонент <T>

Оберните контент в компонент <T>, чтобы перевести его. Исходное содержимое отображается до тех пор, пока перевод не загрузится.

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

Текст с привязками тоже работает. Содержимое снова переводится всякий раз, когда оно меняется, например, при изменении name:

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

Для часто меняющихся значений, таких как имена и количество, вместо этого используйте переменные, чтобы текст переводился только один раз.

Все переводы, запрошенные одновременно, отправляются в API одним запросом, а переводы кэшируются. Вы можете использовать столько компонентов <T>, сколько захотите.

Плагин регистрирует <T> во всем мире. Вы также можете импортировать его: import { T } from '@magic-translate/vue'. Translate — это тот же компонент, что и T.

Props

PropТипОписание
formality'informal' | 'formal'Устанавливает формальность перевода.
idstringПозволяет редактировать это использование текста самостоятельно.
langLanguageПереопределяет установленный язык с помощью createMagicTranslate.
vRecord<string, unknown>Значения, которые не переведены, в содержимом отмечены как $name. См. раздел Переменные.
<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, начинаются одинаково, выигрывает самая длинная клавиша.
  • Одно и то же имя может появляться несколько раз.
  • Значения вставляются в виде текста, а не в формате HTML. Вместо этого поместите пометку в текст вокруг них: Hi <b>$name</b>.
  • Переменные заменяются только в тексте, а не в таких атрибутах, как href или title.
  • Клавиша, которая не отображается в тексте, выдает предупреждение, в котором обнаруживаются опечатки.
  • При рендеринге на стороне сервера, например в Nuxt, символ <T> с v отображается пустым на сервере и появляется после запуска приложения в браузере.

Ограничения

  1. Компоненты Vue нельзя помещать в компонент <T>. Обычные HTML-элементы подойдут (см. пример ниже), и стили с ограниченной областью действия продолжают работать над ними.
  2. Содержимое компонента <T> не может превышать 10 КБ, что составляет около 5000 символов.
<!-- 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.

ПредыдущееVueСледующийuseTranslate composable