Inicio

Primeros pasos

Verbaly invierte el flujo i18n habitual: escribes texto natural en tu código y el compilador extrae los mensajes, genera claves estables, tipos y bundles por idioma. Requisitos: Node 20+ y Vite 7 u 8.

  1. 1

    Instalación

    Agrega el runtime y el plugin de Vite. Elige tu gestor de paquetes.

     pnpm add verbaly @verbaly/vite
  2. 2

    Genera todo con un comando

    npx verbaly init escribe la config, crea los catálogos de locales/ y detecta tu bundler. Nunca sobreescribe nada. ¿Prefieres cablearlo a mano? Los pasos de abajo hacen lo mismo.

    terminal
    npx verbaly init      # config + locales/ + bundler detection
  3. 3

    Agrega el plugin

    vite.config.ts
    import verbaly from '@verbaly/vite';

export default {
  plugins: [verbaly({ sourceLocale: 'es' })],
};

    sourceLocale es el idioma en el que escribes. Los demás idiomas salen de un catálogo JSON en locales/: deja ahí un en.json o pt.json y Verbaly los detecta automáticamente.

  4. 4

    Escribe texto, no claves

    src/app.ts
    import { t, setLocale } from 'virtual:verbaly';

const saludo = t`Hola ${name}, tienes ${count} mensajes`;

await setLocale('pt'); // lazy-loads pt chunk

    En dev, el plugin extrae los mensajes en vivo: tu catálogo fuente se llena solo, los demás idiomas reciben placeholders "", y verbaly.d.ts mantiene claves y params tipados.

  5. 5

    Traduce y verifica

    terminal
    npx verbaly extract   # sync catalogs + types
npx verbaly check     # exit 1 if anything is missing

Qué exporta el módulo virtual

ExportDescripción
tTraduce: t('key', params) o el tagged t`...`
setLocale(locale)Async: carga el chunk de ese idioma bajo demanda y luego cambia
getLocale()Idioma actual
subscribe(fn)Re-ejecuta la UI en cambios de idioma/mensajes; devuelve unsubscribe
verbalyLa instancia subyacente (uso avanzado)
Copiado en el portapapeles