Thiébault Michaël Thiébault Michaël
← Tous les articles
February 2, 2026

Introduction à Livewire 3 avec Laravel

Développement Web Laravel #Livewire

Livewire est un framework frontend pour Laravel qui permet de créer des interfaces réactives sans avoir à écrire de JavaScript complexe. Avec Livewire, vos composants PHP interagissent directement avec le navigateur de manière dynamique.

Installation de Livewire 3

Pour installer Livewire 3, utilisez Composer :

composer require livewire/livewire:^3.0

Ensuite, ajoutez les directives Livewire dans votre layout Blade :

<!DOCTYPE html>
<html lang="fr">
<head>
    <livewire:styles />
</head>
<body>
    <livewire:scripts />
</body>
</html>

Créer un composant Livewire

Pour générer un composant Livewire (classe + Blade), utilisez la commande :

php artisan make:livewire Posts/PostList

Cette commande crée deux fichiers :

  • Classe PHP : app/Http/Livewire/Posts/PostList.php
  • Vue Blade : resources/views/livewire/posts/post-list.blade.php

Exemple : Afficher et filtrer une liste de posts

Voici un composant simple qui affiche les articles et permet de les filtrer par recherche :

<?php
namespace App\Livewire\Posts;

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

class PostList extends Component
{
    public string $search = '';

    public function render()
    {
        $query = Post::with(['categories', 'tags'])
                     ->orderBy('created_at', 'desc');

        if ($this->search) {
            $query->where(function($q) {
                $q->where('title', 'like', "%{$this->search}%")
                  ->orWhereHas('categories', fn($q2) => $q2->where('name', 'like', "%{$this->search}%"))
                  ->orWhereHas('tags', fn($q3) => $q3->where('name', 'like', "%{$this->search}%"));
            });
        }

        return view('livewire.posts.post-list', [
            'posts' => $query->paginate(10)
        ]);
    }
}

Et dans le Blade associé (post-list.blade.php) :

<div>
    <input type="text" wire:model="search" placeholder="Rechercher un article..." class="form-control mb-3">

    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Titre</th>
                <th>Catégories</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $post)
                <tr>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->categories->pluck('name')->join(', ') }}</td>
                    <td>{{ $post->tags->pluck('name')->join(', ') }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

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

Pourquoi utiliser Livewire ?

  • Pas besoin de JavaScript complexe pour des interactions dynamiques.
  • Intégration facile avec les modèles Laravel et Blade.
  • Composants réutilisables et réactifs.
  • Pagination, filtres et validation en temps réel.

En résumé, Livewire simplifie le développement d’interfaces réactives dans Laravel. Avec quelques lignes de PHP, vous pouvez créer des listes filtrables, des formulaires interactifs et des tableaux paginés directement dans vos vues.

Thiébault Michaël ©