# Vue: Быстрый старт
URL: https://generaltranslation.com/ru/docs/vue/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Добавьте несколько языков в приложение Vue менее чем за 10 минут.

К концу этого руководства ваше приложение Vue будет отображать контент на нескольких языках, а пользователи смогут менять активную локаль без перезагрузки страницы.

`gt-vue` работает как плагин Vue. Плагин однократно загружает и кэширует каждый каталог переводов, а также реактивно повторно отображает переведённый контент при смене локали.

**Предварительные требования:**

* Приложение на Vue 3 версии 3.3 или выше
* Node.js `^20.19.0 || >=22.12.0` для текущего инструментария Vite

<Callout type="info">
  **Пакет версии 0.x:** `gt-vue` нестабилен. Его API и поведение могут меняться между выпусками независимо от стабильных пакетов для React.
</Callout>

## Быстрый старт [#quickstart]

### 1. Установите пакеты

`gt-vue` обеспечивает переводы в вашем приложении. [`gt`](/docs/cli/quickstart) извлекает исходный контент и создаёт каталоги переводов.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-vue
    npm install --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-vue
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-vue
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-vue
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. Создайте файл конфигурации перевода

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

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

* `defaultLocale` — язык исходного контента.
* `locales` содержит список целевых языков. Выберите любую локаль из [списка поддерживаемых локалей](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` указывает CLI, куда сохранять каждый catalog. Не удаляйте placeholder `[locale]` из пути.

### 3. Создайте загрузчик переводов

Создайте загрузчик, возвращающий сгенерированный каталог для указанной локали:

```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;
```

Загрузчик не вызывается для локали по умолчанию, так как исходный контент уже служит её каталогом. Возврат пустого объекта позволяет приложению отображать исходный контент, если целевой каталог недоступен.

### 4. Зарегистрируйте плагин

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

```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');
```

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

### 5. Пометьте контент для перевода

Используйте [`<T>`](/docs/vue/reference/components/t) для форматированного содержимого шаблонов, а [`useGT()`](/docs/vue/reference/composables/use-gt) — для автономных строк, например значений атрибутов полей ввода:

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <main>
    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

Содержимое внутри [`<T>`](/docs/vue/reference/components/t) должно быть статичным. Для значений, определяемых во время выполнения, и условных вариантов используйте [компоненты переменных и ветвления](/docs/vue/guides/formatting-variables).

### 6. Добавьте переключатель языка

Получите текущую локаль с помощью [`useLocale()`](/docs/vue/reference/composables/use-locale) и изменяйте её с помощью [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale):

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT, useLocale, useSetLocale } from 'gt-vue';
import gtConfig from '../gt.config.json';

const gt = useGT();
const locale = useLocale();
const setLocale = useSetLocale();
const locales = [gtConfig.defaultLocale, ...gtConfig.locales];

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <main>
    <label>
      Language
      <select :value="locale" @change="changeLocale">
        <option v-for="code in locales" :key="code" :value="code">
          {{ code }}
        </option>
      </select>
    </label>

    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

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

### 7. Аутентификация и перевод

Войдите в General Translation:

```bash
npx gt auth
```

Команда поможет вам войти в систему и создать учётные данные. Храните созданный production API key в файле локального окружения; не включайте его в клиентский код и не добавляйте в систему контроля версий.

Затем сгенерируйте каталоги переводов:

```bash
npx gt translate
```

CLI сканирует исходный код Vue, переводит извлечённое содержимое и записывает в `src/_gt/` по одному JSON-файлу для каждой целевой локали. Повторно запускайте команду при каждом изменении исходного контента.

### 8. Запуск и проверка

Запустите приложение:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun run dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dev
    ```
  </Tab>
</Tabs>

Откройте локальный URL, который вывел сервер разработки. Выберите `es`, `fr` или `ja` в языковом селекторе и убедитесь, что заголовок и placeholder поля поиска отображаются переведёнными.

## Устранение неполадок [#troubleshooting]

<Accordions>
  <Accordion title="Приложение остаётся в исходной локали">
    Текущая локаль хранится в cookie-файле `generaltranslation.locale`. Удалите устаревший cookie-файл, затем снова выберите целевую локаль. Также убедитесь, что её JSON-файл существует в `src/_gt/` и что загрузчик возвращает его экспорт по умолчанию.
  </Accordion>

  <Accordion title="Переводимая строка не обновляется после смены локали">
    Вызывайте функцию, возвращаемую [`useGT()`](/docs/vue/reference/composables/use-gt), из шаблона или вычисляемого свойства Vue. Строка, переведённая один раз во время setup, представляет собой снимок и не обновляется при изменении реактивного состояния локали.
  </Accordion>
</Accordions>

## 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.