Agrega integraciones

Las Integraciones de Astro agregan nuevas funcionalidades a su proyecto con solo unas pocas líneas de código. Tú mismo puedes escribir una integración personalizada, utilizar una integración oficial utilizar integraciones desarrolladas por la comunidad o también Construir una integración personalizada por ti mismo.

Usando integraciones puedes…

Desbloquear React, Vue, Svelte, Solid y otros populares frameworks de UI con un renderizador.
Habilitar la renderización bajo demanda con un adaptador SSR (EN).
Integrar herramientas como Tailwind y Partytown con unas pocas líneas de código.
Agregar nuevas funcionalidades a tu proyecto, como la generación automática de sitemaps.
Escribir código personalizado que se conecte con el proceso de compilación, el entorno de desarrollo y más.

Integraciones oficiales

Las siguientes integraciones son mantenidas por Astro.

Frameworks UI

Adaptadores SSR

Otras integraciones

Configuración de integración automática

Astro incluye un comando astro add para automatizar la configuración de integraciones. Varios plugins de la comunidad también se pueden agregar utilizando este comando. Consulta la documentación de cada integración para ver si se admite astro add, o si debes instalar manualmente.

Puedes correr el comando astro add utilizando el gestor de paquetes de tu preferencia y nuestro asistente de integración automática actualizará tu archivo de configuración e instalará las dependencias necesarias.

npx astro add react

pnpm astro add react

yarn astro add react

¡Incluso es posible agregar múltiples integraciones al mismo tiempo!

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

Instalación manual

Las integraciones de Astro siempre se agregan a través de la propiedad integrations en tu archivo astro.config.mjs.

Hay tres formas comunes de importar una integración a tu proyecto Astro:

Instala una integración de paquete NPM.
Importando tu propia integración desde un archivo local dentro de tu proyecto.

Escribiendo tu integración en línea, directamente en tu archivo de configuración.

import { defineConfig } from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';

export default defineConfig({
  integrations: [
    // 1. Importado desde un paquete npm instalado
    installedIntegration(),
    // 2. Importado desde un archivo JS local
    localIntegration(),
    // 3. Un objeto en línea
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
});

Consulta la referencia de API de integración para conocer las diferentes formas en las que puedes escribir una integración.

Instalando un paquete NPM

Instala una integración de paquete NPM utilizando un gestor de paquetes, y luego actualiza astro.config.mjs manualmente.

Por ejemplo, para instalar la integración @astrojs/sitemap:

Instala la integración en las dependencias de tu proyecto utilizando tu gestor de paquetes preferido:
- npm
- pnpm
- Yarn
Ventana de terminal
npm install @astrojs/sitemap
Ventana de terminal
pnpm add @astrojs/sitemap
Ventana de terminal
yarn add @astrojs/sitemap
Importa la integración a tu archivo astro.config.mjs y agrégala a tu array integrations[], junto con cualquier opción de configuración:
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  // ...
  integrations: [sitemap()],
  // ...
});
```
Nota que diferentes integraciones pueden tener diferentes configuraciones. Lee la documentación de cada integración y aplica cualquier configuración necesaria a la integración que hayas elegido en astro.config.mjs

Opciones personalizadas

Las integraciones casi siempre se crean como factory function que devuelven el objeto de integración real. Esto te permite pasar argumentos y opciones a la factory function que personaliza la integración para tu proyecto.

integrations: [
  // Ejemplo: personaliza tu integración con argumentos de función
  sitemap({filter: true})
]

Activar una Integración

Las integraciones falsy (con valor falso) son ignoradas, de esta forma puedes activar o desactivar integraciones sin preocuparte por valores undefined o booleanos abandonados.

integrations: [
  // Ejemplo: Omitir la generación de un sitemap en Windows
  process.platform !== 'win32' && sitemap()
]

Actualizando integraciones

Para actualizar todas las integraciones oficiales a la vez, ejecuta el comando @astrojs/upgrade. Este actualizará tanto Astro como todas las integraciones oficiales a sus última versiones.

Actualización Automática

# Actualiza Astro y las integraciones oficiales a la última versión
npx @astrojs/upgrade

# Actualiza Astro y las integraciones oficiales a la última versión
pnpm dlx @astrojs/upgrade

# Actualiza Astro y las integraciones oficiales a la última versión
yarn dlx @astrojs/upgrade

Actualización Manual

Para actualizar una o más integraciones manualmente, utiliza el comando apropiado para tu gestor de paquetes.

# Ejemplo: actualiza las integraciones de React y Tailwind
npm install @astrojs/react@latest @astrojs/tailwind@latest

# Ejemplo: actualiza las integraciones de React y Tailwind
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# Ejemplo: actualiza las integraciones de React y Tailwind
yarn add @astrojs/react@latest @astrojs/tailwind@latest

Eliminando una Integración

Para eliminar una integración, primero desinstala la integración de tu proyecto

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

Después, elimina la integración de tu archivo astro.config.*:

import { defineConfig } from 'astro/config'
import react from "@astrojs/react";

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

Encontrar más integraciones

Puedes encontrar muchas integraciones desarrolladas por la comunidad en el Directorio de Integraciones de Astro. Sigue los enlaces para obtener instrucciones detalladas de uso y configuración.

Construyendo tu propia integración

La API de integración de Astro está inspirada en Rollup y Vite, y está diseñada para sentirse familiar para cualquiera que haya escrito antes un plugin de Rollup o Vite.

Consulta la referencia API de integración para saber qué pueden hacer las integraciones y cómo escribir una tú mismo.

Contribuir

Comunidad

Agrega integraciones

Integraciones oficiales

Frameworks UI

@astrojs/alpinejs

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

Adaptadores SSR

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Otras integraciones

@astrojs/db

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/sitemap

@astrojs/tailwind