Lingo.dev + .json (Vue.js)

Lingo.dev CLI traduce archivos JSON de i18n de Vue.js preservando el formato de mensajes, la sintaxis de interpolación y las convenciones específicas de Vue. La CLI funciona perfectamente con la biblioteca vue-i18n, mantiene todo el formato de mensajes de Vue, conserva los marcadores de posición como {name}, maneja correctamente la vinculación de mensajes con la sintaxis @: y mantiene intactos los marcadores de posición de interpolación de componentes.

Configuración rápida

Configuración para archivos de localización i18n de Vue.js:

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

Recordatorio: [locale] es un marcador de posición que debe permanecer literalmente en la configuración, ya que se reemplaza con la localización real durante la ejecución de la CLI.

Traducir archivos i18n de Vue

npx lingo.dev@latest i18n

Preserva el formato de mensajes de Vue.js, los marcadores de posición de interpolación y la sintaxis específica de vue-i18n.

Características de Vue i18n

Interpolación de mensajes

{
  "message": {
    "hello": "Hola {name}!",
    "welcome": "Bienvenido/a {name}, tienes {count} mensajes"
  }
}

Reglas de pluralización

{
  "car": "coche | coches",
  "apple": "sin manzanas | una manzana | {count} manzanas"
}

Mensajes vinculados

{
  "common": {
    "name": "Nombre de la aplicación"
  },
  "welcome": "Bienvenido/a a @:common.name"
}

La sintaxis de vinculación de mensajes @: de Vue se conserva.

Características avanzadas de Vue

Soporte para mensajes HTML

{
  "message": {
    "title": "Bienvenido/a a <strong>nuestra plataforma</strong>",
    "link": "Visita nuestro <a href='/help'>centro de ayuda</a>"
  }
}

Interpolación de componentes

{
  "message": {
    "terms": "Acepto los {0}términos de servicio{/0} y la {1}política de privacidad{/1}"
  }
}

La sintaxis de marcadores de posición para la interpolación de componentes permanece intacta.

Formato de fecha, hora y números

{
  "datetime": {
    "short": "{value}",
    "long": "{value}"
  },
  "number": {
    "currency": "{value}"
  }
}

Configuración avanzada

Múltiples directorios de localización

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

Bloquear claves específicas de Vue

"vue-json": {
  "include": ["src/locales/[locale].json"],
  "lockedKeys": ["$vuetify", "dateTimeFormats", "numberFormats"]
}