<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

<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. <T> 구성 요소 안에 Vue 구성 요소를 넣을 수 없어.일반 HTML 요소도 괜찮고 (아래 예 참조) 범위가 지정된 스타일도 계속 작동해.
2. <T> 구성 요소 내의 콘텐츠는 10KB, 즉 약 5,000자를 초과할 수 없어.

<!-- 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 써.