Framework

Astro

La integración oficial de Astro. Una línea en astro.config conecta la extracción en vivo, las claves tipadas y el gate del build; si usas el flujo de espejo pre-traducido, verbaly render corre solo después de cada build.

Qué puedes lograr:

Escribe tu texto directamente en archivos .astro, frontmatter y markup: claves, tipos y catálogos se mantienen en sincronía mientras programas
Publica cada idioma como páginas estáticas, con dos flujos para elegir
En el flujo de espejo, verbaly render corre solo después de cada build: copias pre-traducidas, hreflang y un sitemap por idioma sin pasos extra
Un build que se niega a publicar traducciones faltantes, el mismo gate que en cualquier otro setup de Verbaly

Instalación

Instala el paquete con tu gestor de paquetes preferido.

$ pnpm add verbaly @verbaly/astro

Conéctalo

astro.config.mjs

import { defineConfig } from 'astro/config';
import verbaly from '@verbaly/astro';

export default defineConfig({
  integrations: [verbaly()],
});

Esa única línea inyecta el plugin de Vite con la raíz de tu proyecto fijada: extracción en vivo mientras programas, el módulo tipado virtual:verbaly y el gate del build. Los tipos generados viven dentro de la carpeta .astro propia de Astro, sin archivos añadidos a tu proyecto. Las opciones son las mismas del plugin de Vite (locales, sourceLocale, dir, failOnMissing…), inline o en tu verbaly.config.

Escribe el texto en su lugar

src/pages/index.astro

---
import { createRequestInstance } from 'virtual:verbaly';
const { t } = await createRequestInstance('en');
const title = t`Search and find`;
---

<h1>{title}</h1>
<p>{t`Hello ${name}, you have ${count} messages`}</p>
<img alt={t`Company logo`} src="/logo.png" />

El compilador lee tus archivos .astro como cualquier otra fuente: el frontmatter y las expresiones del markup se extraen, cada mensaje se convierte en una clave estable con params tipados, y una entrada sin traducir hace fallar el build antes de publicarse.

Dos formas de publicar los idiomas

Los sitios Astro son estáticos por defecto, así que el idioma se decide al momento del build. Elige el flujo que calce con tu routing:

Páginas por ruta

Si el i18n routing de Astro es dueño de tus URLs (/es/…, /pt/…), crea una instancia por página y usa t como siempre. Astro es dueño de las rutas; Verbaly, de los catálogos y la seguridad de tipos.

src/pages/[locale]/index.astro

---
import { createRequestInstance } from 'virtual:verbaly';
const { t } = await createRequestInstance(Astro.currentLocale);
---

Modo espejo

Un solo árbol de páginas, copias pre-traducidas. Enlaza tu markup con atributos data-verbaly y agrega una sección render a tu config: después de astro build, la integración espeja el sitio en dist/es/, dist/pt/… con cada mensaje pre-rellenado, más alternates hreflang y un sitemap por idioma cuando defines baseUrl. Sin flash de contenido sin traducir y sin trabajo en el cliente.

verbaly.config.mjs

export default {
  locales: ['en', 'es', 'pt'],
  render: { baseUrl: 'https://example.com', sitemap: true },
};