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

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

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

Быстрый старт

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

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

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

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

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

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

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

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

npx lingo.dev@latest run

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/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

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

Комбинируйте перевод внутри компонентов и файловый перевод:

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

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

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

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

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