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

title: Перевод строк
description: Как переводить метки Vue, атрибуты и общие строки с помощью useGT и useMessages.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/configuring

---

Используйте [`useGT()`](/docs/vue/reference/composables/use-gt) для строк, которые нельзя представить в виде содержимого шаблона, например для placeholders, доступных меток и значений, передаваемых другому компоненту. Используйте [`msg()`](/docs/vue/reference/functions/msg) вместе с [`useMessages()`](/docs/vue/reference/composables/use-messages), если статическое сообщение объявляется в одном модуле, а отображается в другом.

## Перевод с помощью `useGT` [#use-gt]

Вызовите [`useGT()`](/docs/vue/reference/composables/use-gt) при настройке компонента, а затем вызовите возвращаемую функцию в шаблоне:

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

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

Используйте строковый литерал, чтобы CLI мог его извлечь. При отсутствии записи в каталоге возвращается исходная строка.

Поддерживается только статический `$context`:

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

Фигурные скобки воспринимаются как обычный текст. [`useGT()`](/docs/vue/reference/composables/use-gt) не обрабатывает синтаксис ICU, не интерполирует переменные и не поддерживает параметры строк React, такие как `$id`, `$maxChars` и `$format`.

## Обеспечьте реактивность результатов перевода [#reactivity]

Функция, возвращаемая [`useGT()`](/docs/vue/reference/composables/use-gt), при вызове обращается к активному каталогу. Вызывайте её из шаблона, вычисляемого значения или реактивного эффекта, если результат должен обновляться при изменении локали или каталога:

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

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` переводится один раз при настройке, после чего сохраняется снимок. При переключении локали плагином [`createGT()`](/docs/vue/reference/functions/create-gt) повторный перевод не выполняется.

## Регистрация общих сообщений [#messages]

Используйте [`msg()`](/docs/vue/reference/functions/msg) для регистрации статических строк в общем модуле. Она помечает контент для извлечения, но не выполняет поиск перевода.

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

Разрешите выбранное сообщение с помощью [`useMessages()`](/docs/vue/reference/composables/use-messages) в месте его рендеринга:

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

Без параметров [`msg()`](/docs/vue/reference/functions/msg) возвращает исходную строку без изменений. При использовании `$context` она добавляет непрозрачные метаданные для поиска, которые считывает [`useMessages()`](/docs/vue/reference/composables/use-messages). Не анализируйте это закодированное представление и не делайте предположений о его структуре.

## Перевод контента со значениями, известными во время выполнения [#variables]

При поиске по простым строкам данные времени выполнения не интерполируются. Поместите всю фразу в [`<T>`](/docs/vue/reference/components/t) и обозначьте изменяемое значение с помощью [`<Var>`](/docs/vue/reference/components/var):

```vue
<T>С возвращением, <Var>{{ accountName }}</Var>!</T>
```

Используйте [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) и [`<DateTime>`](/docs/vue/reference/components/datetime), если значение также нужно отформатировать с учётом локали.

В SPA, работающих только в браузере, где статический поиск нужен во время вычисления модулей, можно использовать [`t()`](/docs/vue/reference/functions/t) после ожидания [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Следуйте руководству [Разработка с переводом для SPA](/docs/vue/guides/developing-spa-translations), чтобы сохранить необходимый порядок импорта.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring