Saltearse al contenido

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

Sección titulada Integraciones oficiales

Las siguientes integraciones son mantenidas por Astro.

Frameworks UI

Adaptadores SSR

Otras integraciones

Configuración de integración automática

Sección titulada 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.

Ventana de terminal
npx astro add react

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

Ventana de terminal
npx astro add react tailwind partytown

Instalación manual

Sección titulada 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:

  1. Instala una integración de paquete NPM.

  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.

Instalando un paquete NPM

Sección titulada 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:

  1. Instala la integración en las dependencias de tu proyecto utilizando tu gestor de paquetes preferido:

    Ventana de terminal
    npm install @astrojs/sitemap

  2. 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

Sección titulada 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

Sección titulada 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

Sección titulada 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

Sección titulada Actualización Automática
Ventana de terminal
# Actualiza Astro y las integraciones oficiales a la última versión
npx @astrojs/upgrade

Actualización Manual

Sección titulada Actualización Manual

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

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

Eliminando una Integración

Sección titulada Eliminando una Integración

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

Ventana de terminal
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

Sección titulada 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

Sección titulada 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.