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 oficialesFrameworks UI
Adaptadores SSR
Otros
Configuración de integración automática
Sección titulada Configuración de integración automáticaAstro 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.
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
Si ves una advertencia con el texto Cannot find package '[nombre-de-paquete]'
después de agregar una integración, probablemente tu gestor de paquetes no haya instalado las peer dependencies por ti. Para instalar los paquetes faltantes, ejecuta npm install [nombre-de-paquete]
en la terminal.
Usando integraciones
Sección titulada Usando integracionesLas 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:
-
Instalando el paquete npm de la integración.
-
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.
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 instaladoinstalledIntegration(),// 2. Importado desde un archivo JS locallocalIntegration(),// 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
Sección titulada Opciones personalizadasLas 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ónLas 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 integracionesPara 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# Actualiza Astro y las integraciones oficiales a la última versiónnpx @astrojs/upgrade
# Actualiza Astro y las integraciones oficiales a la última versiónpnpm dlx @astrojs/upgrade
# Actualiza Astro y las integraciones oficiales a la última versiónyarn dlx @astrojs/upgrade
Actualización Manual
Sección titulada Actualización ManualPara actualizar una o más integraciones manualmente, utiliza el comando apropiado para tu gestor de paquetes.
# Ejemplo: actualiza las integraciones de React y Tailwindnpm install @astrojs/react@latest @astrojs/tailwind@latest
# Ejemplo: actualiza las integraciones de React y Tailwindpnpm add @astrojs/react@latest @astrojs/tailwind@latest
# Ejemplo: actualiza las integraciones de React y Tailwindyarn add @astrojs/react@latest @astrojs/tailwind@latest
Eliminando una Integración
Sección titulada Eliminando una IntegraciónPara eliminar una integración, primero desinstala la integración de tu proyecto
npm uninstall @astrojs/react
pnpm uninstall @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
Sección titulada Encontrar más integracionesPuedes 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ónLa 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.
Recipes