Livewire pour PHP : guide complet

1. Qu'est-ce que Livewire et pourquoi l'utiliser ?

Livewire est une bibliothèque complète pour Laravel qui permet de créer des interfaces dynamiques et réactives sans avoir à écrire de JavaScript. Elle fonctionne côté serveur, en utilisant Alpine.js pour mettre à jour le DOM, mais toute la logique reste en PHP. C'est l'outil idéal pour les développeurs qui souhaitent créer rapidement des applications web interactives sans plonger dans des frameworks front-end complexes.

L'objectif principal de Livewire est de simplifier le développement d'interfaces web modernes tout en conservant l'approche familière de Laravel. Vous écrivez des composants en PHP, et Livewire gère automatiquement les requêtes AJAX, met à jour le DOM et gère l'état. C'est particulièrement utile pour les formulaires, les tableaux de bord, les chats et tout autre élément interactif.

La bibliothèque résout le problème de duplication de code entre le front-end et le back-end, permettant aux développeurs de se concentrer sur la logique métier plutôt que sur la configuration de WebSocket ou de bibliothèques JavaScript complexes. Livewire est parfait pour les projets où la rapidité de développement et la simplicité de maintenance sont essentielles.

2. Installation

Pour installer Livewire, utilisez Composer — le gestionnaire de paquets standard pour PHP. Exécutez la commande suivante à la racine de votre projet Laravel :

composer require livewire/livewire

Après l'installation, Livewire enregistre automatiquement ses fournisseurs de services. Si vous utilisez Laravel 8 ou une version plus récente, aucune configuration supplémentaire n'est nécessaire. Pour les versions plus anciennes, vous devrez peut-être ajouter dans config/app.php :

'providers' => [
    // ...
    Livewire\LivewireServiceProvider::class,
];

Assurez-vous également que votre template (généralement layouts/app.blade.php) inclut les scripts et styles de Livewire :

@livewireStyles
</head>
<body>
    @livewireScripts
</body>

3. Démarrage rapide — exemple minimal fonctionnel

Créons un simple composant compteur. Commencez par exécuter la commande artisan :

php artisan make:livewire counter

Cela crée deux fichiers : app/Http/Livewire/Counter.php et resources/views/livewire/counter.blade.php. Modifions la classe PHP :

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Et le template :

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+1</button>
</div>

Insérez maintenant le composant dans n'importe quelle vue Blade :

<livewire:counter />

Terminé ! En cliquant sur le bouton, le compteur augmente sans rechargement de la page.

4. Méthodes / fonctions / classes principales

4.1. render()

Signature : public function render(): View

Description : Méthode obligatoire qui retourne le template Blade du composant. Elle est appelée à chaque rendu.

public function render()
{
    return view('livewire.my-component', ['data' => $this->getData()]);
}

4.2. mount()

Signature : public function mount(...$params): void

Description : Équivalent du constructeur, appelé une seule fois lors du premier rendu du composant. Utilisé pour initialiser les propriétés.

public $userId;
public $user;

public function mount($userId)
{
    $this->userId = $userId;
    $this->user = User::find($userId);
}