그 `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