StackOne - Laravel Livewire 4 ist da: Das ändert sich für dein Projekt

Livewire gehört seit Jahren zu den beliebtesten Wegen, in Laravel reaktive Oberflächen zu bauen, ohne eine separate JavaScript-Anwendung pflegen zu müssen. Mit Version 4 hat das Livewire-Team laut eigener Ankündigung auf der Laracon US die bisher größte Überarbeitung des Frameworks veröffentlicht, von der Arbeit mit Komponenten bis hin zur Performance unter der Haube. In diesem Artikel fassen wir zusammen, was neu ist, was sich beim Upgrade von v3 auf v4 ändert, und worauf du in deinen Livewire-Projekten achten solltest.

Warum Livewire 4 mehr als ein Versionssprung ist

In der offiziellen Ankündigung im Laravel-Blog erklärte Livewire-Erfinder Caleb Porzio, dass das Framework zuletzt „komplett und total gespalten" war, mit drei unterschiedlichen Wegen, Komponenten zu bauen (Klassen-Komponenten, Volt-Funktionskomponenten, Volt-Klassenkomponenten). Livewire 4 bringt nun einen vierten, vereinheitlichten Weg, der zum neuen Standard wird: Single-File-Components, bei denen PHP-Logik und Blade-Template in einer Datei zusammenleben, aber bei Bedarf jederzeit in Multi-File-Komponenten aufgeteilt werden können.

Damit übernimmt Livewire im Kern das Konzept, das bisher über das separate Paket Volt liefen musste. Volt wird dadurch überflüssig und kann nach dem Upgrade entfernt werden.

Die wichtigsten neuen Features im Überblick

Single-File- und Multi-File-Komponenten
Komponenten lassen sich per php artisan make:livewire künftig direkt als kombinierte Datei erzeugen. Zur besseren Unterscheidung im Editor tragen View-basierte Komponentendateien standardmäßig ein ⚡-Emoji im Dateinamen. Das lässt sich über die Config aber deaktivieren.

Islands
Mit @island lassen sich isolierte Bereiche innerhalb einer Komponente definieren, die unabhängig neu rendern. Das ist ideal für teure Berechnungen oder Live-Statistiken, ohne dafür eine komplette Kind-Komponente anlegen zu müssen.

Slots und Attribute-Forwarding
Komponenten unterstützen jetzt echte Slots sowie automatisches Weiterreichen von HTML-Attributen über {{ $attributes }}. Komponenten-Komposition wird dadurch deutlich flexibler.

Neue Direktiven

wire:sort für Drag-and-Drop-Sortierung ganz ohne zusätzliches JS
wire:intersect für Aktionen beim Ein- oder Austritt aus dem Viewport (z. B. Infinite Scroll)
wire:ref zum direkten Referenzieren von DOM-Elementen aus JavaScript
.renderless und .preserve-scroll als neue Modifier direkt im Template

Lazy- und Deferred-Loading
Neben dem bekannten viewport-basierten Lazy-Loading können Komponenten jetzt per defer sofort nach dem initialen Seitenaufbau nachgeladen werden, optional gebündelt über lazy.bundle bzw. defer.bundle.

Async Actions
Mit wire:click.async oder dem #[Async]-Attribut lassen sich Aktionen parallel ausführen, ohne andere Requests zu blockieren.

wire:transition auf Basis der View Transitions API
Statt eines Wrappers um Alpines x-transition nutzt wire:transition jetzt die native Browser View Transitions API. Einfache Ein- und Ausblend-Übergänge funktionieren weiterhin, alle bisherigen Modifier (.opacity, .scale, .duration, .origin) entfallen dabei.

Performance-Verbesserungen
wire:poll blockiert keine anderen Requests mehr, und mehrere wire:model.live-Anfragen laufen jetzt parallel statt nacheinander. Tippen fühlt sich dadurch spürbar schneller an.

JavaScript-Verbesserungen
Ein neues $errors-Magic-Property erlaubt Zugriff auf die Fehler-Bag direkt aus JavaScript, $intercept ermöglicht das Abfangen und Verändern von Livewire-Requests, und Scripts in View-Komponenten funktionieren jetzt ganz ohne @script-Wrapper mit automatischer $wire-Bindung.

Die vollständige, technische Liste aller Änderungen findest du im Vergleich zwischen v3 und main auf GitHub sowie im offiziellen Upgrade Guide.

Was du beim Upgrade wirklich beachten musst

Die gute Nachricht zuerst: Laut Livewire-Team lässt sich die überwiegende Mehrheit der Anwendungen mit überschaubarem Aufwand aktualisieren, da viele Breaking Changes nur fortgeschrittene Nutzungsszenarien betreffen. Die wichtigsten Punkte:

Konfigurationsdatei aktualisieren. Mehrere Keys in config/livewire.php wurden umbenannt oder neu strukturiert (z. B. layout zu component_layout, neue component_locations und component_namespaces).
wire:model verhält sich anders. Modifier wie .blur und .change steuern jetzt auch, wann der Wert clientseitig synchronisiert wird, nicht mehr nur, wann der Request gesendet wird. Wer das alte Verhalten braucht, ergänzt .live (z. B. wire:model.live.blur).
wire:model reagiert nicht mehr auf Kind-Events. Container-Elemente mit wire:model lauschen standardmäßig nur noch auf direkt am Element ausgelöste Events. Für das alte Verhalten gibt es den neuen .deep-Modifier.
Routing: Route::livewire() ersetzt die direkte Registrierung von Komponenten in Routen und ist nun für Single- und Multi-File-Komponenten erforderlich.
Komponenten-Tags müssen geschlossen werden. Wegen der neuen Slot-Unterstützung führt ein unsauber geschlossener Tag wie <livewire:foo> nicht mehr automatisch zum Rendern der Komponente. Zwingend ist jetzt <livewire:foo />.
Volt-Migration: Livewire\Volt\Component wird zu Livewire\Component, Volt::route() zu Route::livewire(), Volt::test() zu Livewire::test(). Der Volt-ServiceProvider und das Paket livewire/volt können danach entfernt werden.
Asset- und Endpoint-URLs enthalten jetzt einen Hash aus deinem APP_KEY (aus /livewire/update wird /livewire-{hash}/update). Das ist relevant für Firewall-Regeln, CDN-Konfigurationen und individuelle Middleware.
JS-Hooks: Die Hooks commit und request sind zugunsten der neuen Interceptor-Methoden interceptMessage und interceptRequest als deprecated markiert, funktionieren aber vorerst weiter.

Wichtig: Zum Zeitpunkt der ersten öffentlichen Vorschauen lief Livewire 4 zunächst als Beta, wurde inzwischen aber offiziell released. Bei produktiven Projekten empfiehlt sich trotzdem ein gründlicher Testlauf in einer Staging-Umgebung, bevor v4 live geht, besonders wenn eigene JS-Hooks, individuelle wire:model-Constructs oder Volt im Einsatz sind.

Lohnt sich das Upgrade für dein Projekt?

Für die meisten Anwendungen: ja. Die Performance-Verbesserungen bei Polling und parallelen Live-Updates wirken sich direkt auf die gefühlte Geschwindigkeit deiner App aus, Islands und Async Actions lösen Probleme, für die man bisher oft auf zusätzliche Kind-Komponenten oder JavaScript ausweichen musste, und die Vereinheitlichung von Volt und Livewire vereinfacht langfristig die Codebasis erheblich. Gleichzeitig sind einige der Breaking Changes, insbesondere rund um das wire:model-Verhalten und die neue URL-Struktur, Dinge, die man nicht einfach automatisiert durchlaufen lassen sollte, sondern die eine bewusste Prüfung im eigenen Projekt verdienen.

Fragen zum Livewire- oder Laravel-Upgrade?

Ob Migration von Livewire 3 auf 4, Ablösung von Volt, oder generelle Fragen und Probleme in bestehenden Laravel- oder Livewire-Projekten: Wir unterstützen dich dabei, egal ob als klar abgegrenztes Projekt mit Festpreis oder flexibel auf Stundenbasis.

Ruf uns einfach an oder schreib uns kurz eine Nachricht über unsere Kontaktseite. Wir schauen uns dein Projekt an und sagen dir ehrlich, was der beste Weg für dein Upgrade ist.

Quellen

Laravel Livewire Livewire 4 Laravel Volt Webentwicklung Livewire Upgrade Laravel Update

Autor: Carsten Strickrodt

Zurück zur Übersicht Laravel Livewire 4 ist da: Das ändert sich für dein ProjektDatum: 22.07.2026