Laravel Livewire 3: reactieve UI zonder JS

Laravel Livewire is een full-stack framework waarmee je dynamische, reactieve interfaces bouwt zonder ook maar één regel JavaScript te schrijven. Je schrijft je componenten als gewone PHP-klassen gekoppeld aan Blade-templates; Livewire stuurt gebruikersinteracties op de achtergrond naar de server en past de teruggekomen HTML slim toe op de DOM. Zo bouw je zoekvelden, formulieren, paginering en live filters — functies die klassiek een SPA vereisen — zonder de vertrouwde wereld van Laravel te verlaten. In dit artikel loop ik door de installatie van Livewire 3, hoe het onder de motorkap werkt en de patronen die mij in echte projecten goed van pas kwamen.

Wat is nieuw in Livewire 3?

De derde grote versie is een echte sprong vooruit in zowel snelheid als ontwikkelaarservaring vergeleken met de vorige generatie. De hoogtepunten:

Lichtere payload: Alpine.js zit nu in het pakket, dus je voegt het niet meer apart toe.
Nieuwe mappenstructuur: componentklassen staan in app/Livewire en views in resources/views/livewire.
Op attributen gebaseerde API: schonere code via PHP 8-attributen als #[Validate], #[Computed] en #[On].
wire:model standaard lui: voor performance synchroniseren bindings nu naar de server wanneer je een veld verlaat in plaats van bij elke toetsaanslag.

Installatie

In een bestaand Laravel 10- of 11-project is Livewire toevoegen met Composer alles wat je nodig hebt:

composer require livewire/livewire

Voeg daarna de stijlen toe in de <head> van je hoofdlayout en de scripts vlak voor de afsluitende </body>-tag. In Livewire 3 worden deze meestal automatisch geïnjecteerd, maar als je ze expliciet wilt plaatsen:

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

Maak je eerste component

Laten we een component genereren met Artisan. Het onderstaande commando maakt zowel de PHP-klasse als de Blade-view:

php artisan make:livewire SearchPosts

Aan de klassekant worden publieke eigenschappen rechtstreeks aan de view gebonden. Hier een voorbeeld van een zoekveld:

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),
        ]);
    }
}

Aan de viewkant bind je het zoekveld aan de eigenschap met wire:model.live. De modifier .live werkt de server bij terwijl de gebruiker typt, zodat resultaten direct filteren:

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

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

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

Het gebruik van wire:key is cruciaal voor elementen die in een lus worden gerenderd, zodat Livewire de DOM correct kan mappen. Sla je het over, dan kun je onverwacht gedrag zien wanneer de lijst opnieuw geordend wordt.

Acties: kliks aan de server koppelen

De echte kracht van reactiviteit zit in acties. Je kunt elke publieke methode van de componentklasse rechtstreeks aan een HTML-event koppelen. Stel dat we een bericht als favoriet aan/uit zetten:

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

In Blade roep je het aan met wire:click:

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

Zodra de knop wordt aangeklikt, voert Livewire de methode op de server uit en plaatst de gewijzigde HTML terug in de pagina; de hele pagina laadt nooit opnieuw. Voor trage bewerkingen kun je met wire:loading een laadindicator tonen om de gebruiker feedback te geven.

Validatie en berekende eigenschappen

Validatie in Livewire 3 is heel netjes dankzij de op attributen gebaseerde API. Voeg gewoon #[Validate] toe aan een eigenschap met de regel:

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');
    }
}

Foutmeldingen toon je in de view met @error('title'). Voor afgeleide data definieer je berekende eigenschappen met #[Computed] om het resultaat tijdens de request te cachen en overbodige queries te vermijden.

Praktische performancetips

Geef de voorkeur aan luie binding: als je niet echt bij elke toetsaanslag een request nodig hebt, gebruik dan gewoon wire:model in plaats van .live.
Debounce: verminder ruis bij live zoeken met wire:model.live.debounce.300ms.
Lazy loading: stel zware componenten uit met het attribuut #[Lazy] of een placeholder-skelet.
Vergeet wire:key niet: verplicht in lijsten voor correcte DOM-mapping.

Wanneer wel en wanneer geen Livewire?

Livewire blinkt uit in projecten met zware backendlogica die een Laravel-team van begin tot eind beheert. Voor formuliergerichte panelen, beheerinterfaces en gefilterde lijsten levert het snel resultaat zonder de kosten van een aparte API en frontend-stack. Daarentegen zijn Vue of React beter geschikt voor interacties op milliseconde-niveau (drag-and-drop-editors, realtime game-interfaces) of werk dat volledig client-side moet draaien. Voor de meeste klassieke webapps vindt Livewire echter een opvallend evenwichtig punt tussen snelheid en eenvoud.

Veelgestelde vragen

Moet ik Alpine.js apart installeren voor Livewire 3?

Nee. Livewire 3 bundelt Alpine.js en laadt het automatisch. Je kunt x- Alpine-directives direct naast wire:-directives gebruiken zonder aparte installatie.

Livewire doet bij elke interactie een serverrequest — is dat niet traag?

Elke interactie is een kleine AJAX-request; alleen de gewijzigde fragmenten komen terug, niet de hele pagina. Zolang je het aantal requests beheerst met luie binding, debounce en berekende eigenschappen, is de performance voor de meeste apps prima.

Levert het SEO-problemen op?

Nee. Livewire rendert de eerste pagina als volledige HTML op de server, dus zoekmachines crawlen de inhoud zonder problemen. Volgende interacties zijn dynamisch, maar de eerste lading is volledig server-side.

Een reactieve Laravel-interface nodig? Met Livewire bouwen we snelle, onderhoudbare panelen zonder een JavaScript-stack mee te slepen. Wil je je project bespreken, neem contact met me op.