# vue: Локальное хранение переводов
URL: https://generaltranslation.com/ru/docs/vue/guides/storing-translations.mdx
---

title: Локальное хранение переводов
description: Как генерировать, включать в бандл и загружать каталоги переводов gt-vue вместе с приложением.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/translating-content

---

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

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

## Настройте output path [#configure]

Укажите для `output` в `gt.config.json` путь внутри каталога с исходным кодом. placeholder `[locale]` создаёт отдельный файл для каждой целевой локали:

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

Для локали по умолчанию файл каталога не нужен, поскольку исходный контент уже есть в приложении.

## Сгенерируйте каталоги [#generate]

После добавления или изменения переводимого контента запустите CLI:

```bash
npx gt translate
```

Команда извлекает поддерживаемые варианты использования [`<T>`](/docs/vue/reference/components/t), [`useGT()`](/docs/vue/reference/composables/use-gt), [`msg()`](/docs/vue/reference/functions/msg) и [`t()`](/docs/vue/reference/functions/t), а затем записывает файлы для целевых локалей. Считайте эти файлы сгенерированным выводом и не редактируйте их вручную.

Добавьте генерацию переводов перед production-сборкой, если каждое развёртывание должно включать актуальные каталоги:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vue-tsc -b && vite build"
  }
}
```

CLI требуются `GT_PROJECT_ID` и `GT_API_KEY` в окружении сборки. Не включайте ключ для production в бандл браузера.

## Загрузка каталогов с Vite [#vite]

Создайте колбэк [`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;
```

Передайте его в [`createGT()`](/docs/vue/reference/functions/create-gt) для реактивной загрузки или в [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) для предварительно загруженного SPA, работающего только в браузере.

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

## Используйте явные импорты, когда это необходимо [#explicit-imports]

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

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

const loaders = {
  es: () => import('./_gt/es.json'),
  fr: () => import('./_gt/fr.json'),
};

const loadTranslations: LoadTranslations = async (locale) => {
  const load = loaders[locale as keyof typeof loaders];
  return load ? (await load()).default : {};
};

export default loadTranslations;
```

Поддерживайте синхронизацию этой карты с `locales` в `gt.config.json`. Возврат `{}` уместен для намеренно неподдерживаемой локали; отклонение промиса делает ошибку видимой вызывающему коду.

## Загрузка из другого источника [#custom-source]

Колбэк может получать каталог с вашего эндпоинта вместо импорта файла из бандла:

```ts
const loadTranslations: LoadTranslations = async (locale) => {
  const response = await fetch(`/translations/${locale}.json`);
  if (!response.ok) throw new Error(`Catalog unavailable for ${locale}`);
  return response.json();
};
```

[`createGT()`](/docs/vue/reference/functions/create-gt) кэширует каждый успешно загруженный каталог на весь срок существования экземпляра плагина и предотвращает дублирование параллельных загрузок. Проверяйте ответы на границе эндпоинта; среда выполнения ожидает полный [`TranslationCatalog`](/docs/vue/reference/types/translation-catalog) с ключами-хэшами для запрошенной локали.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/managing-locales
- /docs/vue/guides/translating-content