Lingo.dev + Vue.js однокомпонентные файлы

CLI Lingo.dev поддерживает одиночные файлы компонентов Vue I18n, позволяя вам хранить переводы внутри ваших файлов .vue.

Примечание: Если ваше приложение на Vue.js использует JSON-файлы локализации, используйте формат .json для фронтенда.

Быстрая настройка

Создайте файл конфигурации i18n.json в корневой директории вашего проекта:

{
  "version": 1,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

Эта конфигурация устанавливает английский как исходный язык, нацеливается на испанский, французский и немецкий языки и обрабатывает все файлы .vue в директории src.

Найти поддерживаемые языки

Список доступных исходных и целевых языков:

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

Перевести всё

Выполните следующую команду, чтобы перевести все компоненты Vue:

npx lingo.dev@latest i18n

CLI сканирует ваши компоненты на наличие блоков <i18n>, переводит новый или изменённый контент и обновляет переводы на месте.

Как это работает с компонентами Vue

Lingo.dev работает напрямую со стандартной структурой i18n Vue:

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

После перевода ваш компонент будет содержать все целевые языки:

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

Расширенная конфигурация

Исключение файлов

Исключите определённые компоненты из перевода:

"vue-json": {
  "include": ["src/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Гибридный перевод

Совмещайте перевод на основе компонентов и файлов:

"buckets": {
  "vue-json": {
    "include": ["src/**/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

Этот подход позволяет хранить переводы, относящиеся к конкретным компонентам, внутри компонентов, а глобальные переводы — в отдельных JSON-файлах.

Почему стоит использовать этот подход

• Переводы остаются с компонентами, которые их используют
• Нет необходимости извлекать строки в отдельные файлы
• ИИ понимает контекст компонентов для более качественного перевода
• Переводятся только изменённые элементы
• Соответствует рекомендованным шаблонам Vue I18n

Lingo.dev предоставляет переводы на основе ИИ, сохраняя компонентную архитектуру Vue.