Saltearse al contenido
Astro Astro

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 o utilizar integraciones desarrolladas por la comunidad.

Usando integraciones puedes…

  • Desbloquear React, Vue, Svelte, Solid y otros frameworks populares.
  • 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

Frameworks UI

Adaptadores SSR

Otros

Configuración de integración automática

Astro incluye un comando astro add para automatizar la configuración de integraciones.

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.

Terminal window
npx astro add react

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

Terminal window
npx astro add react tailwind partytown

Usando integraciones

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:

  1. Instalando el paquete npm de la integración.

  2. Importando tu propia integración desde un archivo local dentro de tu proyecto.

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

    astro.config.mjs
    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.

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()
]

Eliminando una Integración

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

Terminal window
npm uninstall @astrojs/react

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

astro.config.mjs
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.