Laravel Livewire 3: reaktive UI ohne JS

Laravel Livewire ist ein Full-Stack-Framework, mit dem du dynamische, reaktive Oberflächen baust, ohne eine einzige Zeile JavaScript zu schreiben. Du schreibst deine Komponenten als einfache PHP-Klassen in Verbindung mit Blade-Templates; Livewire schickt Benutzerinteraktionen im Hintergrund an den Server und spielt das zurückgelieferte HTML intelligent in den DOM ein. So baust du Suchfelder, Formulare, Paginierung und Live-Filter — Funktionen, die klassisch eine SPA verlangen — ohne die vertraute Welt von Laravel zu verlassen. In diesem Artikel zeige ich die Installation von Livewire 3, wie es unter der Haube funktioniert, und die Muster, die mir in echten Projekten gute Dienste geleistet haben.

Was ist neu in Livewire 3?

Die dritte Hauptversion ist ein echter Sprung nach vorn, sowohl bei Geschwindigkeit als auch bei der Entwicklererfahrung im Vergleich zur Vorgängergeneration. Die Höhepunkte:

Leichtere Nutzlast: Alpine.js ist jetzt im Paket enthalten, du fügst es nicht mehr separat hinzu.
Neue Verzeichnisstruktur: Komponentenklassen liegen in app/Livewire und Views in resources/views/livewire.
Attributbasierte API: sauberer Code durch PHP-8-Attribute wie #[Validate], #[Computed] und #[On].
wire:model standardmäßig faul: aus Performancegründen synchronisieren Bindungen jetzt zum Server, wenn ein Feld verlassen wird, statt bei jedem Tastendruck.

Installation

In einem bestehenden Laravel-10- oder -11-Projekt genügt es, Livewire mit Composer hinzuzufügen:

composer require livewire/livewire

Füge anschließend die Styles im <head> deines Haupt-Layouts und die Skripte direkt vor dem schließenden </body>-Tag ein. In Livewire 3 werden diese in der Regel automatisch eingefügt, aber wenn du sie explizit platzieren willst:

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

Erstelle deine erste Komponente

Generieren wir eine Komponente mit Artisan. Der folgende Befehl erstellt sowohl die PHP-Klasse als auch die Blade-View:

php artisan make:livewire SearchPosts

Auf der Klassenseite werden öffentliche Eigenschaften direkt an die View gebunden. Hier ein Beispiel für ein Suchfeld:

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

Auf der View-Seite bindest du das Suchfeld mit wire:model.live an die Eigenschaft. Der Modifikator .live aktualisiert den Server, während der Nutzer tippt, sodass die Ergebnisse sofort gefiltert werden:

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

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

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

Die Verwendung von wire:key ist für in einer Schleife gerenderte Elemente entscheidend, damit Livewire den DOM korrekt zuordnen kann. Lässt du es weg, kann es beim Neuordnen der Liste zu unerwartetem Verhalten kommen.

Aktionen: Klicks an den Server binden

Die wahre Stärke der Reaktivität liegt in den Aktionen. Du kannst jede öffentliche Methode der Komponentenklasse direkt an ein HTML-Ereignis binden. Nehmen wir an, wir markieren einen Beitrag als Favorit:

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

In Blade rufst du sie mit wire:click auf:

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

Sobald der Button geklickt wird, führt Livewire die Methode auf dem Server aus und spielt das geänderte HTML zurück in die Seite ein; die gesamte Seite wird nie neu geladen. Bei langsamen Vorgängen kannst du mit wire:loading einen Ladeindikator anzeigen, um dem Nutzer Rückmeldung zu geben.

Validierung und berechnete Eigenschaften

Die Validierung in Livewire 3 ist dank der attributbasierten API sehr sauber. Füge einer Eigenschaft einfach #[Validate] mit der Regel hinzu:

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

Fehlermeldungen zeigst du in der View mit @error('title') an. Für abgeleitete Daten definierst du berechnete Eigenschaften mit #[Computed], um das Ergebnis für die Dauer des Requests zwischenzuspeichern und redundante Abfragen zu vermeiden.

Praktische Performance-Tipps

Bevorzuge faules Binding: Wenn du nicht wirklich bei jedem Tastendruck einen Request brauchst, nutze einfaches wire:model statt .live.
Debounce: Reduziere bei der Live-Suche das Rauschen mit wire:model.live.debounce.300ms.
Lazy Loading: Verschiebe schwere Komponenten mit dem Attribut #[Lazy] oder einem Platzhalter-Skelett.
Vergiss wire:key nicht: in Listen für korrektes DOM-Mapping zwingend.

Wann Livewire — und wann nicht?

Livewire glänzt in Projekten mit starker Backend-Logik, die ein Laravel-Team von Anfang bis Ende verantwortet. Für formularlastige Panels, Admin-Oberflächen und gefilterte Listen liefert es schnell, ohne die Kosten einer separaten API und eines Frontend-Stacks. Im Gegensatz dazu sind Vue oder React besser geeignet für Interaktionen im Millisekundenbereich (Drag-and-Drop-Editoren, Echtzeit-Spieloberflächen) oder Arbeit, die vollständig clientseitig laufen muss. Für die meisten klassischen Webanwendungen trifft Livewire jedoch einen bemerkenswert ausgewogenen Punkt zwischen Geschwindigkeit und Einfachheit.

Häufige Fragen

Muss ich Alpine.js für Livewire 3 separat installieren?

Nein. Livewire 3 bündelt Alpine.js und lädt es automatisch. Du kannst x--Alpine-Direktiven direkt neben wire:-Direktiven verwenden, ganz ohne separate Installation.

Livewire macht bei jeder Interaktion einen Server-Request — ist das nicht langsam?

Jede Interaktion ist ein kleiner AJAX-Request; nur die geänderten Fragmente kommen zurück, nicht die ganze Seite. Solange du das Request-Volumen mit faulem Binding, Debounce und berechneten Eigenschaften steuerst, ist die Performance für die meisten Anwendungen völlig ausreichend.

Verursacht es SEO-Probleme?

Nein. Livewire rendert die erste Seite als vollständiges HTML auf dem Server, sodass Suchmaschinen den Inhalt problemlos crawlen. Folgeinteraktionen sind dynamisch, aber der erste Aufruf ist vollständig serverseitig.

Brauchst du eine reaktive Laravel-Oberfläche? Mit Livewire liefern wir schnelle, wartbare Panels, ohne einen JavaScript-Stack mitzuschleppen. Um dein Projekt zu besprechen, nimm Kontakt mit mir auf.