# vue: Перевод контента
URL: https://generaltranslation.com/ru/docs/vue/guides/translating-content.mdx
---

title: Перевод контента
description: Как переводить содержимое шаблонов Vue на месте с помощью компонента <T>.
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/configuring

---

Компонент [`<T>`](/docs/vue/reference/components/t) переводит содержимое своего слота по умолчанию на активную локаль. Напишите фразу целиком на языке-источнике и оберните её, чтобы текст, вложенные элементы и форматирование переводились как единое целое.

## Оберните содержимое шаблона в `<T>` [#wrap]

Поместите статический контент для пользователей в слот по умолчанию:

```vue
<script setup lang="ts">
import { T } from 'gt-vue';
</script>

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

CLI определяет запись по её содержимому и структуре. Не включайте значения времени выполнения в обычную интерполяцию внутри перевода. Оборачивайте их в [`<Var>`](/docs/vue/reference/components/var), [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) или [`<DateTime>`](/docs/vue/reference/components/datetime).

Не вкладывайте один [`<T>`](/docs/vue/reference/components/t) в другой. Вместо этого разделяйте независимые фразы на соседние переводы.

## Добавление контекста для перевода [#context]

Используйте свойство `context`, удобное для Vue, если один и тот же исходный текст может иметь разные значения:

```vue
<T context="a bank beside a river">Bank</T>
```

Контекст изменяет идентификатор каталога и передаёт системе перевода информацию, необходимую для выбора нужной формулировки. На странице он не отображается.

Необязательные пропсы `max-chars` и `requires-review` добавляют метаданные перевода. Оставляйте эти значения статическими, чтобы CLI мог их извлечь.

## Перевод с помощью пользовательского компонента [#components]

Статически заданный контент в слоте по умолчанию пользовательского компонента включается в перевод окружающего содержимого:

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

Экземпляр пользовательского компонента, его обработчики и непереводимые пропсы сохраняются, а переведённое содержимое заменяет его слот по умолчанию и поддерживаемые пропсы со статическим текстом. `DocsLink` не заменяется на Fragment, поэтому его состояние и поведение остаются привязаны к той же границе. Окружающий [`<T>`](/docs/vue/reference/components/t) сохраняет корневой Fragment как в исходном, так и в переведённом рендеринге, не меняя тип корня при обновлении.

Внешнему переводу доступно только содержимое, переданное в слот по умолчанию. Текст, созданный внутри самого `DocsLink.vue`, не входит в эту запись. Оберните этот внутренний текст в собственный [`<T>`](/docs/vue/reference/components/t).

Теги пользовательских компонентов внутри перевода должны разрешаться во время выполнения. Импортируйте локальные компоненты или регистрируйте их обычным способом; предупреждение о неразрешённом компоненте означает ошибку конфигурации, а не поддерживаемый источник перевода.

## Явно обозначайте границы слотов [#slots]

Внешний [`<T>`](/docs/vue/reference/components/t) может переводить обычное содержимое слота по умолчанию пользовательского компонента. Слоты с областью видимости, произвольные именованные слоты и компоненты, выбираемые во время выполнения, зависят от поведения, которое механизм извлечения не может надёжно определить.

* Размещайте [`<T>`](/docs/vue/reference/components/t) внутри слота с областью видимости или именованного слота, если этот слот содержит фразу.
* Оборачивайте непрозрачную динамическую границу в [`<Var>`](/docs/vue/reference/components/var), если её вывод должен оставаться неизменным.
* Используйте прямые теги для пользовательских компонентов. Формы селекторов поддерживаются только для распознаваемых компонентов GT и встроенных компонентов Vue, которые механизм извлечения может явно разрешить; размещайте [`<T>`](/docs/vue/reference/components/t) внутри границ произвольных пользовательских компонентов, компонентов, выбираемых во время выполнения, или неразрешённых селекторов.

Для [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) разместите отдельные переводы в слотах по умолчанию и резервном слоте:

```vue
<Suspense>
  <T>Your dashboard is ready.</T>
  <template #fallback>
    <T>Loading your dashboard…</T>
  </template>
</Suspense>
```

Когда [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) находится внутри внешнего [`<T>`](/docs/vue/reference/components/t), его содержимое по умолчанию может участвовать в переводе, а резервное содержимое сохраняется вне него. Если фраза каждого слота находится в отдельном переводе, становится однозначно понятно, к чему она относится.

## Безопасное представление динамической структуры [#dynamic-structure]

Система переводов должна знать все возможные фразы на этапе извлечения. Для формулировок, зависящих от количества, используйте [`<Plural>`](/docs/vue/reference/components/plural), а для других конечных вариантов — [`<Branch>`](/docs/vue/reference/components/branch) вместо условных конструкций времени выполнения непосредственно в дереве переводов.

```vue
<T>
  <Branch :branch="status">
    <template #active>Ваша подписка активна.</template>
    <template #paused>Ваша подписка приостановлена.</template>
    <template #default>Статус вашей подписки недоступен.</template>
  </Branch>
</T>
```

Компилятор шаблонов Vue определяет, как отступы и переносы строк преобразуются в текстовые узлы. Размещайте непосредственно в разметке фразы, которые должны быть видны пользователю, и не меняйте настройку обработки пробелов компилятора, чтобы при извлечении и рендеринге использовалась одинаковая структура.
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring