useTranslate composable

Her şey bir bileşene uymuyor. placeholder veya title gibi özellikler bir dize alır ve bazen komut dosyanızda bir çeviriye ihtiyacınız vardır. Bunlar için useTranslate composable veya translate yöntemini kullanın.

useTranslate composable

useTranslate, genellikle t olarak adlandırılan ve bir dizeyi çeviren bir işlev döndürür:

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

const t = useTranslate();
</script>

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

t çeviri yüklenirken orijinal metni döndürür. Hazır olduğunda, bileşen yeniden oluşturulur. <T> bileşeni gibi, dil ve formalite seçeneklerini kabul eder:

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

Ayrıca metnin bu kullanımını kendi başına düzenlemek için bir id kabul eder:

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

Değişkenler

v olarak çevrilmemesi gereken değerleri iletin ve <T> bileşeninde olduğu gibi $name olarak referans verin:

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

Metin bir kez Search {0} products olarak çevrilir ve count değiştiğinde önbelleğe alınan çeviri yeniden kullanılır.

useT composable ile useTranslate ile aynıdır.

Kodda çeviri

Komut dosyanızdaki bir dizeyi çevirmek için translate öğesini arayın. Bir söz verir.

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 seçeneği olmadan metin geçerli dile çevrilir.

translate değişkenleri de alır:

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

Dış bileşenler, örneğin bir mağazada, createMagicTranslate tarafından döndürülen nesneyi doğrudan kullanır. Aynı translate ve setLanguage yöntemlerini ve language özelliğini sağlar.