Moderne reaktive Benutzeroberflächen mit Laravel 12 und Livewire 4: Ein Leitfaden für die Praxis

Livewire 4 erschien im Januar 2026 mit einem verfeinerten Komponentenlebenszyklus, standardmäßigem Lazy Loading und nativen Form-Objekten. Wer in den letzten Jahren zwischen Vue, React und Inertia hin- und hergesprungen ist, nur um reaktive Oberflächen in eine Laravel-Anwendung zu bringen, bekommt mit diesem Release eine ernsthafte Einladung, zurückzukehren. Dieser Leitfaden zeigt, worauf es wirklich ankommt, wenn Sie Livewire 4 in Produktion nehmen: kein Hello-World-Zähler, sondern die Muster, die echten Traffic überstehen.

Warum Livewire 4 die Rechnung verändert

Livewire 3 war die Neuimplementierung, die das Framework wirklich schnell machte. Livewire 4 ist der Feinschliff: Lazy Components sind jetzt der Standard für geroutete Einstiegspunkte, Form-Objekte haben ad-hoc-öffentliche Eigenschaften als kanonisches Muster abgelöst, und das neue Islands Primitiv erlaubt es, Teile einer Seite in unabhängige Neu-Renderings auszulagern. Das Ergebnis sind weniger Payloads, kleinere Diffs und weit weniger von dem Schmerz, dass bei jedem Tastendruck alles neu rendert, der Livewire 2 plagte.

1. Form-Objekte: das wichtigste Livewire-4-Muster

Hören Sie auf, Formularfelder direkt in Ihre Komponente zu packen. Ein Form-Objekt kapselt Zustand, Regeln und den Persistenzaufruf: die Komponente wird zur dünnen Hülle.

<?php

namespace App\Livewire\Forms;

use App\Models\Project;
use Livewire\Attributes\Validate;
use Livewire\Form;

class ProjectForm extends Form
{
    public ?Project $project = null;

    #[Validate('required|string|min:3|max:120')]
    public string $name = '';

    #[Validate('nullable|string|max:2000')]
    public string $description = '';

    #[Validate('required|in:draft,active,archived')]
    public string $status = 'draft';

    public function setProject(Project $project): void
    {
        $this->project = $project;
        $this->name = $project->name;
        $this->description = $project->description ?? '';
        $this->status = $project->status;
    }

    public function save(): Project
    {
        $this->validate();

        $project = $this->project
            ? tap($this->project)->update($this->only(['name', 'description', 'status']))
            : Project::create($this->only(['name', 'description', 'status']));

        $this->reset();

        return $project;
    }
}

Und die Komponente, die es nutzt:

<?php

namespace App\Livewire\Projects;

use App\Livewire\Forms\ProjectForm;
use App\Models\Project;
use Livewire\Attributes\Lazy;
use Livewire\Component;

#[Lazy]
class Edit extends Component
{
    public ProjectForm $form;

    public function mount(Project $project): void
    {
        $this->authorize('update', $project);
        $this->form->setProject($project);
    }

    public function update(): void
    {
        $project = $this->form->save();
        $this->dispatch('project-saved', id: $project->id);
        session()->flash('status', 'Project updated.');
    }

    public function render(): \Illuminate\View\View
    {
        return view('livewire.projects.edit');
    }
}

2. Alpine-Interop, ohne den Verstand zu verlieren

Livewire 4 wird mit einer engeren Alpine-Brücke ausgeliefert. Verwenden Sie wire:model.live.debounce.500ms für Eingaben, die den Server erreichen sollen, und Alpine für alles, was den Browser nie verlassen sollte: Öffnen/Schließen, Fokusfallen, Übergänge.

<div x-data="{ open: false }" class="rounded-xl border bg-white p-4">
    <div class="flex items-center justify-between">
        <h3 class="font-semibold">{{ $form->name ?: 'Untitled project' }}</h3>
        <button type="button" @click="open = !open" class="text-sm text-teal-600">
            <span x-text="open ? 'Hide details' : 'Show details'"></span>
        </button>
    </div>

    <div x-show="open" x-collapse>
        <input
            type="text"
            wire:model.live.debounce.500ms="form.name"
            class="mt-3 w-full rounded-lg border-gray-300"
        />
        @error('form.name') <p class="text-rose-600 text-sm">{{ $message }}</p> @enderror
    </div>

    <button wire:click="update" wire:loading.attr="disabled" class="mt-4 rounded-lg bg-teal-600 px-4 py-2 text-white">
        <span wire:loading.remove>Save</span>
        <span wire:loading>Saving…</span>
    </button>
</div>

3. Datei-Uploads mit Fortschritt und S3

Uploads sind der Hauptgrund, warum Teams zu SPA-Frameworks greifen. Livewire 4 handhabt sie sauber: temporärer lokaler Upload, Validierung, dann das Verschieben nach S3 dispatchen.

use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;

class ProjectAttachments extends Component
{
    use WithFileUploads;

    public Project $project;

    #[Validate(['files.*' => 'file|max:10240|mimes:pdf,png,jpg,docx'])]
    public array $files = [];

    public function save(): void
    {
        $this->validate();

        foreach ($this->files as $file) {
            $path = $file->storePubliclyAs(
                "projects/{$this->project->id}",
                Str::uuid().'.'.$file->getClientOriginalExtension(),
                's3'
            );

            $this->project->attachments()->create([
                'path' => $path,
                'size' => $file->getSize(),
                'mime' => $file->getMimeType(),
            ]);
        }

        $this->files = [];
        $this->dispatch('attachments-saved');
    }
}

4. Komponenten mit Pest testen

Die Livewire-Testhelfer fügen sich fließend in Pest ein. Kein Headless-Browser, keine wackeligen Wartezeiten.

use App\Livewire\Projects\Edit;
use App\Models\Project;
use App\Models\User;

it('updates a project owned by the user', function () {
    $user = User::factory()->create();
    $project = Project::factory()->for($user, 'owner')->create(['name' => 'Old']);

    actingAs($user)
        ->livewire(Edit::class, ['project' => $project])
        ->set('form.name', 'Renamed Project')
        ->call('update')
        ->assertHasNoErrors()
        ->assertDispatched('project-saved');

    expect($project->fresh()->name)->toBe('Renamed Project');
});

it('rejects updates from non-owners', function () {
    $project = Project::factory()->create();
    $intruder = User::factory()->create();

    actingAs($intruder)
        ->livewire(Edit::class, ['project' => $project])
        ->assertForbidden();
});

5. Produktions-Checkliste

Wo Livewire 4 passt und wo nicht

Livewire ist jetzt die richtige Standardlösung für Admin-Panels, Einstellungsseiten, Dashboards, mehrstufige Formulare und die meisten CRUD-Anwendungen. Es ist das falsche Werkzeug für kollaborative Editoren, Echtzeit-Canvas-Anwendungen oder alles, bei dem jeder Tastendruck eine Rückmeldung unter 50 ms erfordert. Setzen Sie in solchen Fällen auf Alpine für die Interaktionsebene und Livewire, um das Ergebnis zu persistieren.