Saltearse al contenido

@astrojs/alpinejs

Esta integración de Astro agrega Alpine.js a tu proyecto para que puedas usar Alpine.js en cualquier lugar de tu página.

La herramienta de línea de comandos astro add automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué gestor de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las instrucciones y escribe “y” en la terminal (es decir, “sí”) para cada uno.

Terminal window
# Usando NPM
npx astro add alpinejs
# Usando Yarn
yarn astro add alpinejs
# Usando PNPM
pnpm astro add alpinejs

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Primero, instala el paquete @astrojs/alpinejs usando tu gestor de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

Terminal window
npm install @astrojs/alpinejs

La mayoría de los gestores de paquetes también instalarán las dependencias asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘alpinejs’” (o similar) al iniciar Astro, deberás instalar manualmente Alpine.js:

Terminal window
npm install alpinejs @types/alpinejs

Luego, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpine()],
// ^^^^^^^^
});

Una vez que la integración está instalada, puedes usar las directivas y sintaxis de Alpine.js dentro de cualquier componente Astro. El script de Alpine.js se agrega y habilita automáticamente en cada página de tu sitio web.

Revisa nuestra documentación de integraciones de Astro para obtener más información sobre las integraciones.

La integración de Alpine.js no te da control sobre cómo se carga o inicializa el script. Si requieres este control, considera instalar y usar Alpine.js manualmente. Astro admite todas las instrucciones de configuración manual de Alpine.js oficialmente documentadas, usando etiquetas <script> dentro de un componente Astro.

Actualmente no es posible extender Alpine.js al usar este componente. Si necesitas esta función, considera seguir la configuración manual de Alpine.js en su lugar usando una etiqueta de script de Astro:

src/pages/index.astro
<!-- Ejemplo: Carga AlpineJS en una sola página. -->
<script>
import Alpine from 'alpinejs';
// Opcional: Extiende Alpine.js
// Alpine.directive('foo', ...)
window.Alpine = Alpine;
Alpine.start();
</script>

La integración de Alpine.js no admite ninguna configuración personalizada en este momento.

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integraciones de Astro para obtener más información sobre las integraciones.

Este paquete es mantenido por el equipo de Astro. ¡Estás invitado a abrir una issue o PR!

Consulta el CHANGELOG.md para un historial de cambios en esta integración.

Otros

Frameworks UI

Adaptadores SSR

Otros