Livewire

Livewire permet de construire des composants réutilisables qui gèrent leurs propres données, actions et rendu HTML. Lorsqu’un utilisateur interagit avec l’interface (formulaire, clic, recherche en temps réel, etc.), Livewire envoie les informations au serveur via AJAX et met à jour uniquement les parties nécessaires de la page.

Cette approche rend le développement rapide et simple, en utilisant le même langage côté serveur et côté client, tout en évitant la complexité de JavaScript ou de frameworks front-end comme Vue ou React.

Livewire est parfaitement intégré avec Blade, le moteur de templates de Laravel, et fonctionne avec des outils comme Alpine.js pour des interactions plus avancées côté client.

Installation

Dans un projet Laravel existant :

1composer require livewire/livewire

Inclure les scripts Livewire dans votre layout Blade :

1@livewireStyles
2@livewireScripts

Exemple de composant simple

Créer un composant Livewire :

1php artisan make:livewire Compteur

Cela génère deux fichiers :

• app/Http/Livewire/Compteur.php (logique PHP)
• resources/views/livewire/compteur.blade.php (vue Blade)

Logique PHP (Compteur.php) :

 1namespace App\Http\Livewire;
 2 
 3use Livewire\Component;
 4 
 5class Compteur extends Component
 6{
 7    public $compte = 0;
 8 
 9    public function incrementer()
10    {
11        $this->compte++;
12    }
13 
14    public function render()
15    {
16        return view('livewire.compteur');
17    }
18}

Vue Blade (compteur.blade.php) :

1<div>
2    <h2>Compteur : {{ $compte }}</h2>
3    <button wire:click="incrementer">Incrémenter</button>
4</div>

Pour afficher le composant dans votre page :

1<livewire:compteur />

Exemple de formulaire interactif

 1// app/Http/Livewire/Inscription.php
 2namespace App\Http\Livewire;
 3 
 4use Livewire\Component;
 5 
 6class Inscription extends Component
 7{
 8    public $nom;
 9    public $email;
10 
11    public function enregistrer()
12    {
13        $this->validate([
14            'nom' => 'required|min:3',
15            'email' => 'required|email'
16        ]);
17 
18        // Sauvegarde dans la base de données ou autre action
19        session()->flash('message', 'Utilisateur enregistré avec succès.');
20    }
21 
22    public function render()
23    {
24        return view('livewire.inscription');
25    }
26}

 1<!-- resources/views/livewire/inscription.blade.php -->
 2<div>
 3    @if (session()->has('message'))
 4        <p class="text-green-500">{{ session('message') }}</p>
 5    @endif
 6 
 7    <input type="text" wire:model="nom" placeholder="Nom">
 8    @error('nom') <span class="text-red-500">{{ $message }}</span> @enderror
 9 
10    <input type="email" wire:model="email" placeholder="Email">
11    @error('email') <span class="text-red-500">{{ $message }}</span> @enderror
12 
13    <button wire:click="enregistrer">S’inscrire</button>
14</div>

Bonnes pratiques et outils

• Décomposer les pages en petits composants réutilisables.
• Utiliser wire:model pour la liaison bidirectionnelle entre PHP et l’interface.
• Valider les données côté serveur avec les règles Laravel.
• Combiner avec Alpine.js pour des interactions côté client plus fines.
• Gérer les événements Livewire pour communiquer entre composants ($emit, $listeners).
• Éviter de rendre des composants trop lourds pour maintenir des performances optimales.

Livewire est un outil puissant pour créer des applications Laravel réactives sans écrire de JavaScript complexe. Il permet de développer rapidement des interfaces interactives, tout en profitant de la robustesse et de la sécurité de Laravel côté serveur.