# vue: Разработка с переводами для SPA
URL: https://generaltranslation.com/ru/docs/vue/guides/developing-spa-translations.mdx
---

title: Разработка с переводами для SPA
description: Как предварительно загрузить Vue SPA и переводить статические строки на уровне модуля с помощью t().
related:
  links:
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/configuring

---

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

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) дополняет [`useGT()`](/docs/vue/reference/composables/use-gt), а не заменяет его. Используйте компонуемую функцию для обычного содержимого компонентов, а также для Vue-приложений или приложений с серверным рендерингом, которым необходимо реактивное переключение локалей.

## Выберите среду выполнения SPA [#choose]

Используйте [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) только при соблюдении всех следующих условий:

* Приложение целиком работает в браузере.
* Модули должны переводить строки в процессе выполнения.
* Допустима перезагрузка страницы при изменении локали.

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

## Инициализация перед импортом приложения [#bootstrap]

Инициализация должна выполняться до загрузки любого модуля, вызывающего [`t()`](/docs/vue/reference/functions/t). Небольшой асинхронный загрузочный модуль работает со стандартной целевой версией сборки Vite 6 и не требует `await` верхнего уровня или `build.target: 'esnext'`.

### 1. Экспортируйте функцию монтирования

Измените обычный входной модуль Vite, чтобы он экспортировал функцию, принимающую инициализированный [`GTPlugin`](/docs/vue/reference/types/gt-plugin):

```ts title="src/main.ts"
import { createApp } from 'vue';
import type { GTPlugin } from 'gt-vue';
import App from './App.vue';

export function mount(gt: GTPlugin) {
  createApp(App).use(gt).mount('#app');
}
```

### 2. Инициализация и динамический импорт

Создайте загрузочный модуль, который ожидает завершения [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), затем импортирует приложение и устанавливает именно тот плагин, который возвращает инициализация:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

async function bootstrap() {
  const gt = await initializeGTSPA({
    ...gtConfig,
    loadTranslations,
  });

  const { mount } = await import('./main');
  mount(gt);
}

bootstrap().catch((error) => {
  console.error('Failed to initialize translations', error);
});
```

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

### 3. Укажите Vite путь к загрузочному модулю

Обновите модульный скрипт в `index.html`, чтобы он загружал `src/index.ts` вместо `src/main.ts`:

```html title="index.html"
<script type="module" src="/src/index.ts"></script>
```

## Перевод строк на уровне модуля [#translate]

Модули, загружаемые через динамический импорт приложения, могут синхронно вызывать [`t()`](/docs/vue/reference/functions/t):

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

export const message = t('Hello World');

export const navigation = [
  { label: t('Documentation', { $context: 'primary navigation' }), href: '/docs' },
  { label: t('Account settings'), href: '/settings' },
];
```

Вызовы должны использовать статическую исходную строку и могут передавать статический `$context`. Экстрактор регистрирует эти строки, а предзагруженный каталог обеспечивает синхронный поиск при выполнении модуля.

[`t()`](/docs/vue/reference/functions/t) не поддерживает тегированные шаблоны, синтаксис ICU, интерполяцию, `$format` и `$maxChars`. Для содержимого со значениями, доступными во время выполнения, используйте [`<T>`](/docs/vue/reference/components/t) вместе с [`<Var>`](/docs/vue/reference/components/var).

## Смена локали в инициализированном SPA [#locales]

Передайте `defaultLocale` и `locales` из `gt.config.json` в [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). При следующей инициализации неподдерживаемая сохранённая локаль заменяется локалью по умолчанию.

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

Именно такой механизм перезагрузки делает константы на уровне модуля безопасными. Если локаль нужно менять без навигации, используйте [`createGT()`](/docs/vue/reference/functions/create-gt) и вызывайте [`useGT()`](/docs/vue/reference/composables/use-gt) из шаблона или вычисляемого значения.
## Next steps

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