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

La CLI de Lingo.dev 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 localización JSON, utiliza 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,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

Esta configuración establece el inglés como idioma fuente, tiene como objetivos el español, francés y alemán, y procesa todos los archivos .vue en el directorio src.

Encontrar idiomas compatibles

Lista de idiomas fuente y objetivo 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 i18n

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

Cómo funciona con componentes Vue

Lingo.dev trabaja directamente con la estructura estándar de i18n 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 objetivo:

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

Traducción híbrida

Combina traducciones basadas en componentes y basadas en archivos:

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

Esta configuración mantiene las traducciones específicas de los 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.