Saltar al contenido
verbatra

Docs / Primeros pasos / Inicio rápido

Página traducida automáticamente

Esta página se tradujo automáticamente, así que puede contener errores o sonar un poco rara. La versión en inglés es la fuente de la verdad. Leer el original en inglés.

Inicio rápido con Vue

Traduce con verbatra los archivos de locale de vue-i18n de tu app de Vue, desde la instalación hasta el primer texto en alemán en pantalla.

Al final de esta página, tu app de Vue muestra un texto en alemán que verbatra tradujo desde src/locales/en.json, y un archivo de bloqueo hace que cada ejecución posterior traduzca solo lo que cambió. Necesitas Node.js ^22.18.0 || >=24, un proyecto de Vue y unos diez minutos. Los primeros cuatro pasos no necesitan cuenta ni clave de API.

¿Ya tienes archivos de locale y un agente de programación? Dale en su lugar el prompt de Configura verbatra con un agente de IA: trabaja con los archivos que tu proyecto ya tiene y se detiene antes de gastar nada.

Pasos

Instala la CLI

npm install --save-dev @verbatra/cli

verbatra es una herramienta de desarrollo y nunca llega a tu app. Los comandos de abajo usan npx; con pnpm, yarn o bun, ejecuta pnpm verbatra, yarn verbatra o bun run verbatra.

Añade un archivo de locale de origen

Si src/locales/en.json ya existe, sáltate este paso. Si no, créalo con dos textos, uno de ellos con un marcador de posición:

src/locales/en.json
{
  "greeting": "Hello, {name}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}

Genera una configuración

npx @verbatra/cli init --format vue-i18n-json --provider gemini --yes

--format vue-i18n-json es el formato de archivo de vue-i18n. init encuentra tus archivos de locale, o escribe el patrón src/locales/{locale}.json cuando aún no hay ninguno. --yes acepta lo que init detectó en lugar de preguntar. El nuevo verbatra.config.ts traduce de en a de; añade códigos a targetLocales para más idiomas.

Previsualiza la ejecución sin clave

npx @verbatra/cli translate --dry-run
Salida
verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)

Una ejecución de prueba no construye ningún proveedor, así que no necesita clave, no gasta nada y no escribe nada.

Traduce

cp .env.example .env

Abre .env y pega tu clave después de GEMINI_API_KEY=. ¿Aún no tienes clave? Gemini tiene un nivel gratuito: crea una en Google AI Studio. Los demás proveedores y sus variables están en Proveedores.

npx @verbatra/cli translate

verbatra envía los dos textos a Gemini, comprueba que cada marcador de posición sobrevive y escribe src/locales/de.json. El texto depende del modelo, por ejemplo:

src/locales/de.json
{
  "greeting": "Hallo, {name}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}

Comprueba que cada locale está sincronizado

npx @verbatra/cli check
Salida
[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync

check no llama a ningún proveedor y termina con 1 en cuanto un locale deja de estar sincronizado, así que puede proteger un pull request.

Carga los locales en tu app

Añade vue-i18n:

npm install vue-i18n

Después carga ambos archivos y muestra el saludo:

src/main.ts
import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import App from "./App.vue";
import de from "./locales/de.json";
import en from "./locales/en.json";

const i18n = createI18n({
  legacy: false,
  locale: "de",
  fallbackLocale: "en",
  messages: { en, de },
});

createApp(App).use(i18n).mount("#app");
src/App.vue
<template>
  <p>{{ $t("greeting", { name: "Ada" }) }}</p>
</template>

Arranca tu app: el saludo dice Hallo, Ada!.

Qué acaba de pasar

  • verbatra.lock.json guarda un hash de cada texto de origen, para que la siguiente ejecución envíe solo textos nuevos y modificados. Consulta El archivo de bloqueo.
  • Un resultado que pierde un marcador de posición se retiene y nunca se escribe. Consulta Seguridad de la traducción.

Haz commit de los archivos de locale, verbatra.lock.json y verbatra.provenance.json juntos.

Opcional: conecta tu agente de programación Disponible a partir de 0.12.0

npx @verbatra/cli init --agent

Con la configuración ya creada, init --agent la conserva y añade solo los archivos del agente: las reglas de verbatra en AGENTS.md (o CLAUDE.md, cuando es tu único archivo de instrucciones) y el servidor MCP de verbatra, sin las herramientas que gastan, en la configuración de proyecto de cada agente de programación que detecta. Qué archivos escribe para cada agente, y cómo eliges tú los agentes con --client, está en Preparar los agentes de programación. --dry-run muestra los archivos sin escribirlos.

O, sin la CLI, añade solo el servidor MCP a tu perfil de usuario de VS Code; usa una vía, nunca las dos:

Añadir a VS Code

Siguiente

Añadir un idioma

Añade un locale de destino y deja que una ejecución lo complete.

Ejecutar verbatra en CI

Haz fallar un pull request cuando un locale se desvía.

Elige tu stack

El id de formato y la estructura de archivos de cualquier otro framework.

Editar en GitHub

En esta página

PasosInstala la CLIAñade un archivo de locale de origenGenera una configuraciónPrevisualiza la ejecución sin claveTraduceComprueba que cada locale está sincronizadoCarga los locales en tu appQué acaba de pasarOpcional: conecta tu agente de programaciónSiguiente