Lingo.dev + componentes de archivo único de Vue.js

Lingo.dev CLI es compatible con componentes de archivo único de Vue I18n, lo que te permite mantener las traducciones dentro de tus archivos .vue.

Nota: Si tu aplicación Vue.js utiliza archivos de configuración regional JSON, usa el formato .json para frontend.

Configuración rápida

Crea un archivo de configuración i18n.json en la raíz de tu proyecto:

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

Esta configuración establece el inglés como idioma de origen, tiene como objetivo el español, francés y alemán, y procesa archivos .vue en los directorios src/components y src/views.

Buscar idiomas compatibles

Lista los idiomas de origen y destino disponibles:

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

Traducir todo

Ejecuta el siguiente comando para traducir todos los componentes Vue:

npx lingo.dev@latest run

El CLI escanea tus componentes en busca de bloques <i18n>, traduce el contenido nuevo o modificado y actualiza las traducciones en el lugar.

Cómo funciona con componentes Vue

Lingo.dev funciona directamente con la estructura i18n estándar de Vue:

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

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

Después de la traducción, tu componente contendrá todos los idiomas de destino:

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

Configuración avanzada

Excluir archivos

Excluye componentes específicos de la traducción:

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

Traducción híbrida

Combina traducciones basadas en componentes y basadas en archivos:

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

Esta configuración mantiene las traducciones específicas de componentes dentro de los componentes y almacena las traducciones globales en archivos JSON separados.

Por qué usar este enfoque

• Mantiene las traducciones con los componentes que las utilizan
• No es necesario extraer cadenas a archivos separados
• La IA comprende el contexto del componente para mejores traducciones
• Solo traduce lo que ha cambiado
• Funciona con los patrones recomendados de Vue I18n

Lingo.dev proporciona traducciones impulsadas por IA mientras mantiene la arquitectura basada en componentes de Vue.