# Vue: Настройка gt-vue
URL: https://generaltranslation.com/ru/docs/vue/guides/configuring.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как создать плагин перевода для Vue, загружать каталоги и настраивать рендеринг в браузере или на сервере.

Создайте отдельный плагин для каждого изолированного приложения Vue. Плагин хранит активную локаль, загруженные каталоги и реактивное состояние перевода.

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

## Создайте плагин [#create]

Передайте исходную локаль и функцию обратного вызова [`loadTranslations`](/docs/vue/reference/types/load-translations) в [`createGT()`](/docs/vue/reference/functions/create-gt), затем установите возвращённый плагин с помощью `app.use()`:

```ts title="src/main.ts"
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

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

createApp(App).use(gt).mount('#app');
```

Установите этот плагин один раз. При создании другого экземпляра у него будут отдельные кэши локали и каталога.

## Определение начальной локали [#initial-locale]

[`createGT()`](/docs/vue/reference/functions/create-gt) определяет начальную локаль в следующем порядке:

1. Явно указанная опция `locale`.
2. Значение настроенного cookie-файла локали в браузере.
3. `defaultLocale`.

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

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

Имя cookie-файла по умолчанию — `generaltranslation.locale`. Изменяйте `localeCookieName`, только если маршрутизатору или серверу требуется совместно использовать другой cookie-файл.

## Загрузка каталогов переводов [#load]

Для локали по умолчанию используется исходный контент, поэтому её загрузчик никогда не вызывается. Остальные локали загружаются через [`loadTranslations`](/docs/vue/reference/types/load-translations):

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

Успешно загруженные каталоги кэшируются на всё время работы плагина, а одновременные запросы для одной локали используют одну и ту же загрузку. На стороне клиента приложение может монтироваться с исходным контентом, пока загружается первый каталог; переведённые компоненты перерендериваются после его загрузки.

При возврате пустого объекта в качестве резервного используется исходный контент. Если callback завершается с ошибкой, смена локали также завершается с ошибкой, а текущая локаль остаётся активной.

## Синхронизируйте конфигурацию CLI и среды выполнения [#shared-config]

Используйте `gt.config.json` как единый источник данных об исходной локали, целевых локалях и расположении сгенерированного файла:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

CLI читает этот файл напрямую. [`createGT()`](/docs/vue/reference/functions/create-gt) принимает собственные параметры Runtime, поэтому явно передайте `defaultLocale` и свой загрузчик. Список `locales` по-прежнему полезен для переключателя языка и CLI, но реактивный плагин не отклоняет другие коды локалей; доступные локали определяются вашим UI и загрузчиком.

Учётные данные Production API должны находиться в процессе CLI, который генерирует переводы. Не раскрывайте `GT_API_KEY` в коде браузера.

## Настройка серверного рендеринга [#ssr]

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

```ts title="src/gt-server.ts"
import { createGT } from 'gt-vue';
import loadTranslations from './loadTranslations';

export async function createRequestGT(locale: string) {
  const gt = createGT({
    defaultLocale: 'en',
    locale,
    loadTranslations,
  });

  await gt.loadTranslations(locale);
  return gt;
}
```

Установите возвращённый плагин в Vue-приложение запроса. Перед гидратацией в браузере создайте и предварительно загрузите клиентский плагин с той же явно указанной локалью. Если начать гидратацию до готовности целевого каталога, может кратковременно отобразиться исходный контент и возникнуть несоответствие.

## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.