Module 12 – Écosystème (Livewire 3, Volt, Alpine)
Niveau 5.1 – Laravel Livewire
Vue d’ensemble : Livewire 3 (attributs, événements), Volt (composants single-file), Alpine.js, Filament. En fin de module : Volt en pratique, entangle Alpine/Livewire, Filament vs custom.
Objectif
À la fin de ce module, vous saurez :
- Repérer les évolutions Livewire 3 : attributs PHP 8 (#[Rule], #[On], #[Locked]), nouveau système d’événements ($this->dispatch()), et syntaxe plus déclarative.
- Connaître Volt (optionnel) : composants Livewire définis dans un seul fichier Blade (logique + template), pratique pour de petits composants.
- Comprendre le rôle d’Alpine.js dans le stack Livewire : interactions côté client (modales, dropdowns, toggles) sans requête serveur, et $wire pour appeler des méthodes Livewire depuis Alpine.
- Savoir où trouver la documentation et les ressources pour rester à jour (Livewire évolue rapidement).
Livewire 3 en résumé
Livewire 3 s’appuie sur PHP 8 et les attributs pour une configuration plus lisible :
| Attribut | Rôle |
|---|---|
| #[Rule('required|email')] | Règles de validation sur une propriété. |
| #[On('event-name')] | La méthode est appelée quand l’événement event-name est reçu. |
| #[Locked] | La propriété n’est pas mise à jour depuis le payload client (sécurité, performance). |
| #[Url] | La propriété est synchronisée avec l’URL (query string). |
Les événements ont changé par rapport à Livewire 2 : $this->emit() est remplacé par $this->dispatch('nom-evenement', param: $valeur). Les listeners utilisent #[On('nom-evenement')] sur une méthode. Le cours a été rédigé avec cette syntaxe (modules 3 et 9).
Consulter la documentation officielle Livewire pour les nouveautés et les mises à jour.
Volt (composants single-file)
Volt est une couche au-dessus de Livewire qui permet d’écrire un composant dans un seul fichier : la logique (propriétés, méthodes) est écrite en PHP dans le fichier Blade via une syntaxe dédiée, au lieu d’avoir une classe dans app/Livewire et une vue dans resources/views/livewire. La classe est générée à la volée.
Cas d’usage : petits composants (bouton, badge, formulaire simple) où une seule fichier simplifie la navigation. Pour des composants plus gros (listes, formulaires complexes), la séparation classe + vue reste souvent plus lisible.
Documentation : livewire.laravel.com/docs/volt.
Alpine.js : interactivité côté client
Alpine.js est une librairie JavaScript légère pour des interactions dans le DOM : ouvrir/fermer une modale, afficher un dropdown au clic, toggler une classe, etc. Livewire 3 inclut Alpine (ou l’intègre facilement) : vous n’avez pas besoin d’une requête serveur pour « le menu s’ouvre au clic » ou « le tooltip s’affiche au survol ». Vous écrivez un peu de JavaScript déclaratif dans le HTML (directives x-data, x-show, @click, etc.).
Intégration avec Livewire : dans un composant Livewire, le $wire (exposé par Livewire à Alpine) permet d’appeler des méthodes Livewire depuis Alpine. Par exemple, un bouton Alpine qui ouvre une modale (côté client) et, au « Confirmer », appelle $wire.delete(id) pour déclencher la suppression côté serveur. Ainsi, vous combinez : Alpine pour l’UX immédiate (modale, animations), Livewire pour la logique métier (validation, BDD, autorisation).
wire:key et la structure du DOM restent importants quand Alpine et Livewire coexistent (listes dynamiques) pour que le morphing Livewire ne casse pas l’état Alpine.
Filament (admin panel)
Filament est un système d’administration (back-office) construit sur Livewire : tableaux de données (CRUD), formulaires, filtres, permissions, tableaux de bord. Si votre projet est un back-office ou un tableau de bord admin, Filament peut vous faire gagner beaucoup de temps au lieu de coder chaque liste et chaque formulaire à la main. Il repose sur les mêmes bases que ce cours (composants Livewire, Eloquent, validation, policies).
À retenir
- Livewire 3 : attributs #[Rule], #[On], #[Locked] ; $this->dispatch() pour les événements. Consulter la doc officielle pour les dernières évolutions.
- Volt : composants single-file (logique + template dans un seul fichier Blade) pour de petits composants.
- Alpine.js : complément idéal pour l’UX côté client (modales, dropdowns) ; $wire pour appeler Livewire depuis Alpine. Réserver Livewire pour la logique métier et Alpine pour l’interactivité visuelle.
- Filament : admin panel basé sur Livewire, à envisager pour les back-offices.
Approfondissement
- Volt en pratique : pour des petits composants (bouton, badge, carte), Volt évite la séparation classe/vue. Pour des composants avec beaucoup de logique (listes, formulaires complexes), la classe PHP dédiée reste souvent plus lisible. Essayez Volt sur un composant simple pour voir si le style single-file vous convient.
- Entangle (Alpine + Livewire) : $wire dans Alpine donne accès au composant Livewire (ex. $wire.save()). Pour synchroniser une variable Alpine avec une propriété Livewire (ex. un modal ouvert/fermé), la doc Livewire 3 décrit entangle. Utile quand vous mélangez beaucoup d’Alpine (UI) et de Livewire (données) sur le même écran.
- Filament vs custom : Filament fournit CRUD, tableaux, formulaires, permissions clé en main. Si votre back-office correspond au modèle Filament (ressources, tableaux, filtres standards), vous gagnerez du temps. Si vous avez des écrans très spécifiques (workflows, dashboards custom), du Livewire « pur » reste plus flexible.
Dans le prochain module, nous proposons un projet final pour consolider tout le parcours Livewire (composants, formulaires, listes, validation, sécurité, tests).