Livewire oder Vue? Interaktive Oberflächen in Laravel
Livewire reicht, solange die Logik auf dem Server liegt und Formulare, Tabellen und Filter die Anwendung prägen. Vue mit Inertia lohnt den zusätzlichen JavaScript-Stack, wenn die Oberfläche ohne Serverantwort reagieren muss, etwa bei Planungsflächen mit Drag and Drop oder Editoren.
Beide Wege führen zu einer Laravel-Anwendung, in der Routen, Rechte, Validierung und Datenbankzugriff auf dem Server bleiben. Der Unterschied liegt darin, wo die Oberfläche entsteht. Bei Livewire rendert PHP jede Änderung als HTML auf dem Server. Bei Vue mit Inertia rendert der Browser die Seiten aus JavaScript-Komponenten, und Laravel liefert nur noch die Daten dafür.
Ob eine Anwendung überhaupt eine Single Page App braucht, ist eine Grundsatzfrage, die unser Beitrag Single Page App ist nicht immer die Lösung beantwortet. Hier geht es um den nächsten Schritt: Zwei konkrete Werkzeuge stehen zur Wahl, beide offiziell von Laravel unterstützt, und Sie wollen wissen, welches zu Ihrer Anwendung passt. Wie wir solche Webanwendungen und individuelle Software planen, steht auf der Leistungsseite.
Einordnung
Wo die Grenze zwischen beiden verläuft
Die Grenze verläuft entlang einer Frage: Muss die Oberfläche reagieren, bevor der Server geantwortet hat? Ein Formular, das beim Absenden prüft und speichert, braucht das ebenso wenig wie eine Tabelle, die nach jeder Filterauswahl neue Zeilen lädt. Ein Schichtplan, in dem Mitarbeiter per Drag and Drop zwischen Tagen wandern und die Summen sofort neu rechnen, dagegen schon, weil jede Verzögerung beim Ziehen spürbar wird.
Beide Werkzeuge haben am 16.09.2026 eine frische Hauptversion: Livewire 4 erschien am 14.01.2026, Inertia 3 am 25.03.2026. Laravel 13 bietet für beide ein offizielles Starterkit an. Das Livewire-Kit kombiniert Livewire, Tailwind CSS und die Komponentenbibliothek Flux. Das Vue-Kit setzt auf Inertia, die Composition API von Vue 3, TypeScript, Tailwind CSS und die Bibliothek shadcn-vue. Was Laravel 13 sonst für bestehende Projekte bedeutet, fasst der Beitrag zu den Neuerungen in Laravel 13 zusammen.
Livewire 4
Wie Livewire arbeitet
Eine Livewire-Komponente besteht aus einer PHP-Klasse mit Eigenschaften und Methoden und einem Blade-Template. Seit Livewire 4 können Klasse, Template, Styles und Skript auch in einer einzigen Datei liegen. Beim ersten Aufruf rendert der Server HTML und hängt einen Schnappschuss des Komponentenzustands an. Klickt der Nutzer auf einen Knopf, schickt der Browser diesen Schnappschuss mit dem Methodenaufruf per AJAX an den Server. Der Server baut die Komponente daraus neu auf, führt die Methode aus und rendert neues HTML. Livewire vergleicht es mit dem vorhandenen und ändert im Browser nur die abweichenden Stellen. Fokus und eingegebene Werte bleiben dabei erhalten.
Jede Aktion ist also eine Anfrage an den Server. Livewire geht damit sparsam um: Ein Eingabefeld mit wire:model überträgt seinen Wert erst mit der nächsten Aktion, etwa beim Absenden. Erst der Zusatz .live sendet schon beim Tippen, standardmäßig nach einer Pause von 150 Millisekunden. Für reine Anzeigewechsel wie Aufklappen oder Tabs bringt Livewire das JavaScript-Framework Alpine.js mit, das ohne Serveranfrage reagiert.
Livewire 4 hat für größere Seiten die sogenannten Islands eingeführt: Bereiche innerhalb einer Komponente, die sich unabhängig voneinander aktualisieren. Löst ein Nutzer eine Aktion innerhalb einer Island aus, rendert der Server nur diese Island neu und nicht die ganze Komponente.
So prüfen Sie bestehende Livewire-Oberflächen: Öffnen Sie in den Entwicklerwerkzeugen des Browsers den Netzwerk-Tab und tippen Sie in ein Suchfeld. Erscheint pro Tastendruck oder pro kurzer Pause eine Anfrage, ist das Feld mit .live gebunden. Bei einer Suche ist das gewollt, bei einem Formular, das erst beim Speichern geprüft wird, sind es unnötige Anfragen.
Inertia 3
Was Vue mit Inertia anders macht
Inertia ist das Bindeglied zwischen Laravel und einem JavaScript-Frontend wie Vue, React oder Svelte. Routen, Controller, Middleware und Rechte bleiben in Laravel. Ein Controller gibt statt einer Blade-Ansicht den Namen einer Vue-Seitenkomponente und deren Daten zurück. Beim ersten Aufruf liefert der Server eine vollständige HTML-Seite. Jeder weitere Seitenwechsel läuft als Hintergrundanfrage, die nur noch Komponentenname und Daten als JSON enthält. Vue tauscht dann die Seite im Browser aus.
Inertia wirbt dabei mit dem Satz „No API required“. Für die eigene Oberfläche stimmt das: Sie brauchen keine dokumentierte, versionierte Schnittstelle. Eine mobile App oder ein Partnersystem kann die Inertia-Antworten aber nicht sinnvoll nutzen. Braucht Ihr Vorhaben solche weiteren Clients, entsteht die Schnittstelle zusätzlich.
Innerhalb einer Seite arbeitet Vue vollständig im Browser. Der Zustand eines Planungsrasters, eines Formulars mit abhängigen Feldern oder eines Editors ändert sich ohne Serveranfrage, gespeichert wird erst, wenn der Nutzer es auslöst. Dafür braucht das Projekt einen zweiten Werkzeugkasten: Vite-Build, npm-Pakete, TypeScript-Typen und ein Team, das Vue beherrscht. Für Suchmaschinen und Linkvorschauen bietet Inertia serverseitiges Rendern an. Das ist ein eigener Prozess, der mitbetrieben werden muss.
Ein Beispiel für Vue mit Inertia im Alltag ist das Control Panel von Statamic 6, mit dem diese Website gepflegt wird. Wie man dort eigene Vue-Komponenten einhängt, zeigt unser Beitrag Inertia und Vue 3 im Statamic Control Panel. Vue selbst lag am 16.09.2026 in der stabilen Version 3.5 vor, Version 3.6 war als Release Candidate in Arbeit.
Gegenüberstellung
Livewire und Vue mit Inertia im Vergleich
Die Tabelle vergleicht beide Wege für eine typische Geschäftsanwendung mit Anmeldung, Listen, Formularen und Auswertungen. Die Einträge zum Aufwand sind Einschätzungen, keine Messwerte.
Zur vorletzten Zeile: Keiner der beiden Wege liefert von selbst eine Schnittstelle für eine App oder ein ERP. Diese Frage ist von der Frontend-Wahl getrennt zu beantworten.
| Livewire | Vue mit Inertia | |
|---|---|---|
| Wo die Oberfläche entsteht | Auf dem Server, PHP rendert HTML | Im Browser, Vue rendert aus JSON-Daten |
| Sprachen im Team | PHP und Blade, etwas Alpine.js | PHP plus JavaScript oder TypeScript und Vue |
| Reaktion auf eine Eingabe | Nach der Serverantwort, außer bei Alpine.js | Sofort im Browser, Speichern per Anfrage |
| Zustand zwischen Aktionen | Schnappschuss, der mit jeder Anfrage reist | Im Browser, solange die Seite offen ist |
| Build-Prozess | Vite für CSS und wenig JavaScript | Vite mit Vue-Komponenten, Typprüfung, optional SSR-Prozess |
| Suchmaschinen und Linkvorschau | HTML ab dem ersten Byte | Ohne SSR wird die Seite erst im Browser gebaut |
| Offizielle Komponenten im Starterkit | Flux, als Composer-Paket | shadcn-vue, als Quellcode im eigenen Projekt |
| Schnittstelle für weitere Clients | Nicht enthalten, bei Bedarf zusätzlich | Nicht enthalten, bei Bedarf zusätzlich |
| Stärke | Formulare, Tabellen, Filter, Verwaltung | Planungsflächen, Editoren, viel Zustand im Browser |
Flux und shadcn-vue
Komponentenbibliotheken wie Flux
Flux ist eine Komponentenbibliothek für Livewire, gebaut vom Team hinter Livewire. Sie liefert fertige Bausteine wie Buttons, Eingabefelder, Auswahllisten, Dropdowns und Dialoge, gestaltet mit Tailwind CSS und auf das Verhalten von Livewire abgestimmt. Die Grundkomponenten sind kostenlos und kommen per Composer in das Projekt. Flux Pro ist eine kostenpflichtige Lizenz mit weiteren Komponenten, darunter Diagramme, Kalender mit Datumsauswahl, eine Befehlspalette und ein Editor für formatierten Text. Lizenzmodell und Preise nennt die Preisseite von Flux.
Auf der Vue-Seite setzt das offizielle Starterkit auf shadcn-vue. Der Ansatz ist ein anderer: Die Komponenten werden per Befehl als Quelldateien in das eigene Projekt kopiert, zum Beispiel nach resources/js/components/ui. Sie gehören danach Ihnen und lassen sich frei ändern, erhalten aber keine Updates aus einem Paket. Bei Flux ist es umgekehrt: Updates kommen mit dem Paket, Anpassungen laufen über veröffentlichte Vorlagen oder eigene Varianten.
Braucht Ihre Anwendung Diagramme, Kalender oder einen Texteditor, prüfen Sie vor der Entscheidung, ob die gewählte Bibliothek sie mitbringt, ob dafür eine Lizenz nötig ist oder ob ein eigenes Paket hinzukommt.
Anwendungsarten
Entscheidungshilfe nach Anwendungsart
Die folgende Zuordnung ist eine Einschätzung für typische Vorhaben im Mittelstand.
Interne Verwaltungsoberflächen, Kundenportale mit Formularen und Dokumenten, Auswertungen mit Filtern und Export: Livewire. Die Logik liegt ohnehin auf dem Server, und ein Team ohne Vue-Kenntnisse kann die Anwendung pflegen.
Dashboards mit Live-Zahlen: Livewire mit Islands oder zeitgesteuertem Nachladen, solange die Zahlen vom Server kommen.
Planungsoberflächen mit Drag and Drop, Kalender mit vielen gleichzeitig bewegten Einträgen, Konfiguratoren mit abhängigen Feldern, Editoren: Vue mit Inertia, weil der Zustand im Browser lebt.
Eine Oberfläche plus mobile App oder Partneranbindung: zuerst die Schnittstelle planen, danach das Frontend wählen. Ob die App als PWA oder nativ entsteht, klärt der Beitrag PWA oder native App.
Einzelne anspruchsvolle Bausteine in einer sonst schlichten Anwendung: Livewire als Grundlage und der Baustein als eigene JavaScript-Komponente, siehe die Häufigen Fragen unten.
Anforderungen von Großkunden wie Single Sign-on, Rollen und Audit-Log hängen an der Serverseite und funktionieren mit beiden Wegen. Was dafür einzuplanen ist, steht in SaaS für Großkunden.
Für die Tools-Plattform PROCITO, die wir im April 2026 mit einem leeren Repository begonnen haben, fiel unsere Wahl auf Livewire: Laravel, Livewire und Flux UI, dazu Fortify für die Anmeldung, Sanctum, Tailwind CSS und Vite, jeweils in den aktuellen Hauptversionen. Neue Werkzeuge hängen wir als Module in eine gemeinsame Struktur mit gemeinsamer Anmeldung und gemeinsamem Layout ein, und jedes Modul nutzt dieselben Livewire- und Flux-Bausteine, ohne zweiten Technikstapel.
Livewire, Vue und Flux
Häufige Fragen
-
Für die gefühlte Geschwindigkeit zählen Zahl und Dauer der Serveranfragen pro Bildschirm, weniger die Zahl der Seiten oder Datensätze. Wer Eingabefelder nur bei Bedarf live bindet, große Seiten mit Islands aufteilt und reine Anzeigewechsel mit Alpine.js löst, hält die Anfragen klein. Bleibt ein Bildschirm trotzdem träge, weil er ständig ohne Serverantwort reagieren muss, ist er ein Kandidat für eine eigene JavaScript-Komponente.
-
In begrenztem Umfang. Livewire bietet dafür das Attribut wire:ignore: Ein so markierter Bereich wird bei Livewire-Aktualisierungen nicht angefasst, sodass eine eingebundene JavaScript-Komponente dort ungestört arbeiten kann. Eine ganze Anwendung halb mit Livewire und halb mit Inertia zu bauen, bedeutet dagegen zwei Werkzeugkästen und zwei Arten von Tests; das sollte eine bewusste Entscheidung sein.
-
Flux ist die offizielle Komponentenbibliothek des Livewire-Teams mit Bausteinen wie Buttons, Formularfeldern, Dropdowns und Dialogen auf Basis von Tailwind CSS. Die Grundkomponenten sind kostenlos, die Pro-Version mit Diagrammen, Kalendern und Editor ist kostenpflichtig. Das Livewire-Starterkit von Laravel 13 bringt Flux bereits mit.
Welche Oberfläche braucht Ihr Vorhaben?
Legen Sie Ihre wichtigsten drei Bildschirme nebeneinander und markieren Sie, wo die Oberfläche ohne Serverantwort reagieren muss. Wie eine Plattform aussieht, die konsequent auf Livewire und Flux aufbaut, zeigt die Projektseite.
Nachweise
Quellen und Stand
Stand: 16.09.2026. Versionen und Funktionen laut Dokumentation und Release-Seiten der Hersteller; die Einträge zum Aufwand in der Tabelle sind Einschätzungen.
Artikel teilen