Alpine.js

Alpine.js apporte la réactivité et les interactions modernes à des pages HTML statiques. Il permet de :

• Gérer l’état des composants avec des variables réactives.
• Manipuler le DOM avec des directives simples (x-data, x-show, x-bind, x-on).
• Ajouter des comportements interactifs sans écrire beaucoup de JavaScript.

Alpine.js est souvent utilisé avec Laravel, Livewire et Tailwind CSS pour créer des interfaces réactives et modernes rapidement.

Installation

Pour l’utiliser, il suffit d’inclure Alpine.js dans votre projet via CDN :

1<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

Ou via npm pour un projet plus structuré :

1npm install alpinejs

Et l’importer dans votre bundle :

1import Alpine from 'alpinejs';
2window.Alpine = Alpine;
3Alpine.start();

Exemple de base

1<div x-data="{ message: 'Bonjour Larafrique' }">
2    <h1 x-text="message"></h1>
3</div>

Ici, le texte de la balise <h1> est lié à la variable message et se met à jour automatiquement si elle change.

Gestion d’événements

Alpine.js permet de gérer facilement les interactions utilisateur :

1<div x-data="{ compteur: 0 }">
2    <h2>Compteur : <span x-text="compteur"></span></h2>
3    <button x-on:click="compteur++">Incrémenter</button>
4    <button x-on:click="compteur = 0">Réinitialiser</button>
5</div>

• x-on:click peut aussi s’écrire @click pour plus de concision.

Conditions et boucles

• Afficher ou cacher un élément :

1<div x-data="{ visible: true }">
2    <button @click="visible = !visible">Basculer</button>
3    <p x-show="visible">Ce texte est visible selon la variable</p>
4</div>

• Boucles sur une liste :

1<div x-data="{ utilisateurs: ['Aud', 'Larafrique', 'Mbag'] }">
2    <template x-for="user in utilisateurs" :key="user">
3        <p x-text="user"></p>
4    </template>
5</div>

Liaison de données et formulaires

1<div x-data="{ nom: '' }">
2    <input type="text" x-model="nom" placeholder="Entrez votre nom">
3    <p>Bonjour, <span x-text="nom"></span> !</p>
4</div>

• x-model crée une liaison bidirectionnelle entre l’input et la variable nom.

Transition et animations

Alpine.js facilite les transitions :

1<div x-data="{ ouvert: false }">
2    <button @click="ouvert = !ouvert">Afficher / Cacher</button>
3    <div x-show="ouvert" x-transition>
4        Contenu animé avec transition
5    </div>
6</div>

• x-transition applique automatiquement des effets d’entrée et de sortie.

Bonnes pratiques

• Utiliser x-data pour chaque composant réactif.
• Combiner avec Livewire pour gérer les interactions côté serveur.
• Préférer des variables simples et éviter des structures trop complexes dans un même composant.
• Séparer les composants pour plus de lisibilité et de réutilisabilité.
• Utiliser x-init pour exécuter du code lors du chargement du composant.

Alpine.js est un outil léger et pratique pour rendre les pages HTML interactives. Il permet de créer des interfaces dynamiques et réactives rapidement, tout en restant simple et facile à intégrer dans des projets existants sans surcharger le code avec un framework complet.