Plugins y extensiones

Alpine.js soporta plugins oficiales y de la comunidad para ampliar sus funcionalidades.

¿Qué es un plugin en Alpine.js?

Un plugin es una extensión que añade nuevas funcionalidades o directivas a Alpine.js. Puedes usar plugins oficiales o de la comunidad para agregar animaciones, persistencia, máscaras de input, entre otros.

Instalación de plugins

La mayoría de los plugins se instalan vía npm o CDN. Ejemplo con el plugin oficial de persistencia:

npm install @alpinejs/persist

O por CDN:

<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

Uso de un plugin (ejemplo: persistencia)

Primero, importa y registra el plugin en tu JavaScript principal:

import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
Alpine.plugin(persist);
Alpine.start();

Luego, puedes usar la nueva directiva x-persist:

<input x-data x-model="$persist('')" placeholder="Persistente" />

Ejemplo: Alpine.js con plugin de máscaras (mask)

npm install @alpinejs/mask

import Alpine from 'alpinejs';
import mask from '@alpinejs/mask';
Alpine.plugin(mask);
Alpine.start();

<input x-data x-mask="99/99/9999" placeholder="DD/MM/AAAA" />

Ejemplo: Alpine.js con plugin de intersección (intersect)

El plugin @alpinejs/intersect permite detectar cuando un elemento entra o sale del viewport, útil para animaciones o carga diferida:

npm install @alpinejs/intersect

import Alpine from 'alpinejs';
import intersect from '@alpinejs/intersect';
Alpine.plugin(intersect);
Alpine.start();

<div x-data x-intersect:enter="console.log('Entró al viewport')">
Observa la consola al hacer scroll
</div>

Ejemplo: Alpine.js con plugin de colapso (collapse)

El plugin @alpinejs/collapse facilita animaciones de mostrar/ocultar:

npm install @alpinejs/collapse

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
Alpine.plugin(collapse);
Alpine.start();

<div x-data="{ abierto: false }">
<button @click="abierto = !abierto">Toggle</button>
<div x-show="abierto" x-collapse>
  Contenido colapsable animado
</div>
</div>

Plugins populares para Alpine.js

@alpinejs/persist: Persistencia de datos en localStorage.
@alpinejs/mask: Máscaras de input.
@alpinejs/intersect: Detecta cuando un elemento entra/sale del viewport.
@alpinejs/collapse: Animaciones de colapso/expansión.
@alpinejs/focus: Manejo avanzado de foco.

Cómo crear tu propio plugin

Puedes extender Alpine.js creando tus propios plugins:

function miPlugin(Alpine) {
Alpine.directive('saludar', (el, { expression }, { evaluate }) => {
  el.textContent = '¡Hola ' + evaluate(expression) + '!';
});
}
Alpine.plugin(miPlugin);

Buenas prácticas al usar plugins

Revisa la compatibilidad de versiones entre Alpine.js y el plugin.
Registra los plugins antes de llamar a Alpine.start().
Consulta la documentación de cada plugin para conocer todas sus opciones y eventos.
Puedes combinar varios plugins en un mismo proyecto.

Recursos útiles

🐝