Laravel Livewire 3 : interface réactive sans JS

Laravel Livewire est un framework full-stack qui permet de créer des interfaces dynamiques et réactives sans écrire une seule ligne de JavaScript. Tu écris tes composants comme de simples classes PHP associées à des templates Blade ; Livewire envoie les interactions de l'utilisateur au serveur en arrière-plan et applique intelligemment le HTML renvoyé au DOM. Tu peux ainsi construire des champs de recherche, des formulaires, de la pagination et des filtres en direct — des fonctionnalités qui exigent classiquement une SPA — sans jamais quitter l'univers familier de Laravel. Dans cet article, je détaille l'installation de Livewire 3, son fonctionnement interne et les schémas qui m'ont bien servi sur de vrais projets.

Quoi de neuf dans Livewire 3 ?

La troisième version majeure représente un vrai bond en avant, tant en vitesse qu'en expérience développeur, par rapport à la génération précédente. Les points forts :

Charge plus légère : Alpine.js est désormais inclus dans le paquet, tu n'as plus à l'ajouter séparément.
Nouvelle arborescence : les classes de composants vivent dans app/Livewire et les vues dans resources/views/livewire.
API par attributs : un code plus propre grâce aux attributs PHP 8 comme #[Validate], #[Computed] et #[On].
wire:model paresseux par défaut : pour la performance, les liaisons se synchronisent au serveur quand on quitte un champ plutôt qu'à chaque frappe.

Installation

Dans un projet Laravel 10 ou 11 existant, ajouter Livewire avec Composer suffit :

composer require livewire/livewire

Ajoute ensuite les styles dans le <head> de ton layout principal et les scripts juste avant la balise </body> fermante. Dans Livewire 3, ils sont généralement injectés automatiquement, mais si tu veux les placer explicitement :

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}
    @livewireScripts
</body>

Crée ton premier composant

Générons un composant avec Artisan. La commande ci-dessous crée à la fois la classe PHP et la vue Blade :

php artisan make:livewire SearchPosts

Côté classe, les propriétés publiques sont liées directement à la vue. Voici un exemple de champ de recherche :

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;

class SearchPosts extends Component
{
    use WithPagination;

    public string $search = '';

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::where('title', 'like', "%{$this->search}%")
                ->latest()
                ->paginate(10),
        ]);
    }
}

Côté vue, tu lies le champ de recherche à la propriété avec wire:model.live. Le modificateur .live met le serveur à jour à mesure que l'utilisateur tape, donc les résultats se filtrent instantanément :

<div>
    <input type="text" wire:model.live="search" placeholder="Rechercher...">

    @foreach ($posts as $post)
        <article wire:key="{{ $post->id }}">
            <h3>{{ $post->title }}</h3>
        </article>
    @endforeach

    {{ $posts->links() }}
</div>

Utiliser wire:key est crucial pour les éléments rendus dans une boucle afin que Livewire mappe correctement le DOM. Sans cela, tu peux voir des comportements inattendus quand la liste est réordonnée.

Actions : relier les clics au serveur

La vraie puissance de la réactivité réside dans les actions. Tu peux lier n'importe quelle méthode publique de la classe directement à un événement HTML. Disons que l'on bascule un article en favori :

public function toggleFavorite(int $postId): void
{
    $post = Post::findOrFail($postId);
    auth()->user()->favorites()->toggle($post);
}

En Blade, tu l'appelles avec wire:click :

<button wire:click="toggleFavorite({{ $post->id }})">
    Favori
</button>

Au moment du clic, Livewire exécute la méthode sur le serveur et réinjecte le HTML modifié dans la page ; la page entière ne se recharge jamais. Pour les opérations lentes, tu peux afficher un indicateur de chargement avec wire:loading pour donner un retour à l'utilisateur.

Validation et propriétés calculées

La validation dans Livewire 3 est très propre grâce à l'API par attributs. Ajoute simplement #[Validate] à une propriété avec la règle :

use Livewire\Attributes\Validate;

class CreatePost extends Component
{
    #[Validate('required|min:5')]
    public string $title = '';

    public function save(): void
    {
        $this->validate();
        Post::create(['title' => $this->title]);
        $this->reset('title');
    }
}

Tu affiches les messages d'erreur dans la vue avec @error('title'). Pour les données dérivées, définis des propriétés calculées avec #[Computed] afin de mettre le résultat en cache le temps de la requête et d'éviter les requêtes redondantes.

Conseils pratiques de performance

Préfère la liaison paresseuse : si tu n'as pas vraiment besoin d'une requête à chaque frappe, utilise wire:model au lieu de .live.
Anti-rebond : en recherche en direct, réduis le bruit avec wire:model.live.debounce.300ms.
Chargement paresseux : diffère les composants lourds avec l'attribut #[Lazy] ou un squelette de remplacement.
N'oublie pas wire:key : obligatoire dans les listes pour un bon mappage du DOM.

Quand utiliser Livewire — et quand non

Livewire brille dans les projets à forte logique back-end qu'une équipe Laravel maîtrise de bout en bout. Pour les panneaux riches en formulaires, les interfaces d'administration et les listes filtrées, il livre vite sans le coût d'une API et d'une stack front séparées. À l'inverse, pour des interactions instantanées à la milliseconde (éditeurs glisser-déposer, interfaces de jeu en temps réel) ou un travail entièrement côté client, Vue ou React peuvent mieux convenir. Pour la plupart des applications web classiques, Livewire trouve un équilibre remarquable entre vitesse et simplicité.

Questions fréquentes

Dois-je installer Alpine.js séparément pour Livewire 3 ?

Non. Livewire 3 embarque Alpine.js et le charge automatiquement. Tu peux utiliser les directives Alpine x- aux côtés des directives wire: sans aucune installation séparée.

Livewire fait une requête serveur à chaque interaction — n'est-ce pas lent ?

Chaque interaction est une petite requête AJAX ; seuls les fragments modifiés reviennent, pas toute la page. Tant que tu contrôles le volume de requêtes avec la liaison paresseuse, l'anti-rebond et les propriétés calculées, la performance est très bonne pour la plupart des applications.

Cela pose-t-il des problèmes de SEO ?

Non. Livewire rend la page initiale en HTML complet côté serveur, donc les moteurs de recherche explorent le contenu sans souci. Les interactions suivantes sont dynamiques, mais le premier chargement est entièrement côté serveur.

Besoin de construire une interface Laravel réactive ? Avec Livewire, nous pouvons livrer des panneaux rapides et faciles à maintenir sans traîner une stack JavaScript. Pour parler de ton projet, contacte-moi.