`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, и указывайте на них как $name, как и в компоненте <T>:

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

Текст переводится один раз как Search {0} products, а кэшированный перевод повторно используется при изменении count.

useT — это тот же composable, что и useTranslate.

Перевод в коде

Чтобы перевести строку в скрипте, назовите 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