# vue: Управление локалями
URL: https://generaltranslation.com/ru/docs/vue/guides/managing-locales.mdx
---

title: Управление локалями
description: Как объявить локали Vue, создать переключатель языка и управлять реактивными изменениями или изменениями с перезагрузкой страницы.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

Коды локалей, такие как `en-US` и `fr`, связывают выбранный пользователем язык с нужным каталогом и правилами форматирования. Настройте исходную и целевые локали, а затем используйте composables для работы с локалью в компонентах Vue.

## Укажите доступные локали [#declare]

Задайте исходную и целевые локали в `gt.config.json`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` — это язык исходного контента. В `locales` перечисляются языки, для которых CLI должен создать переводы.

Передайте `defaultLocale` в [`createGT()`](/docs/vue/reference/functions/create-gt). Сохраните список целевых языков для переключателя языка:

```ts
const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

Плагин, созданный с помощью [`createGT()`](/docs/vue/reference/functions/create-gt), не ограничивает коды локалей этим списком. В интерфейсе предлагайте только поддерживаемые значения, а загрузчик должен возвращать пустой каталог или намеренно отклонять неподдерживаемые запросы.

## Получение текущей локали [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) возвращает Vue ref с `readonly`. Шаблоны автоматически разворачивают его:

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

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>Active locale: {{ locale }}</p>
</template>
```

Обращайтесь к `locale.value` в обычных выражениях скрипта. Компоненты, вычисляемые значения и эффекты рендеринга, использующие ref, обновятся после завершения реактивного переключения локали.

## Создайте переключатель языка [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) возвращает асинхронный сеттер. Дождитесь его выполнения, чтобы интерфейс мог показывать состояние загрузки или обрабатывать ошибку:

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

С плагином [`createGT()`](/docs/vue/reference/functions/create-gt) сеттер перед сменой локали загружает каталог, которого нет в кэше. Успешно загруженные данные кэшируются. Если запросы перекрываются, активную локаль изменяет только последний запрос.

Пустой каталог также считается успешно загруженным: локаль меняется, а исходный контент отображается в качестве резервного. При отклонении загрузчика активная локаль и её cookie-файл остаются без изменений.

## Сохранение локали [#persistence]

В браузере активная локаль хранится в session cookie-файле, действующем для всего пути, с именем `generaltranslation.locale`. Если `locale` не указан в [`createGT()`](/docs/vue/reference/functions/create-gt), этот cookie-файл имеет приоритет над `defaultLocale`.

Укажите `localeCookieName`, если приложению нужно использовать другую cookie совместно с маршрутизатором или сервером:

```ts
createGT({
  defaultLocale: 'en',
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

Используйте [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) вместо прямой записи cookie-файла. Браузеры не создают реактивное событие при изменении cookie-файла, поэтому внешняя запись сама по себе не запускает рендеринг Vue.

## Выберите реактивное переключение или переключение с перезагрузкой [#runtime-mode]

Режим инициализации определяет, что происходит после изменения cookie-файла:

* [`createGT()`](/docs/vue/reference/functions/create-gt) загружает каталог и обновляет реактивно используемые переводы без перезагрузки страницы.
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) записывает cookie-файл и перезагружает документ, чтобы вызовы [`t()`](/docs/vue/reference/functions/t) на уровне модуля повторно выполнялись после предварительной загрузки новой локали.

Инициализатор SPA принимает `locales` и возвращается к `defaultLocale`, если сохранённая или запрошенная локаль не поддерживается. Следуйте руководству [Разработка с переводом для SPA](/docs/vue/guides/developing-spa-translations), если для перевода на уровне модуля требуется такое поведение.

При серверном рендеринге разрешите локаль запроса на сервере и явно передайте её в [`createGT()`](/docs/vue/reference/functions/create-gt). Явно указанное значение переопределяет устаревший cookie-файл браузера и обеспечивает согласованность локали при серверном рендеринге и гидратации.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content