Überblick
Laravel ist ein Backend-Framework, legt aber großen Wert auf ein durchgängiges Entwicklungserlebnis inklusive des Frontends.Laravel 13 bietet sowohl einen PHP-zentrierten Weg als auch die Nutzung von JavaScript-Frameworks wie React, Vue oder Svelte. Welchen Ansatz Sie wählen, lässt sich anhand von drei Fragen einfacher entscheiden:
- Möchten Sie die UI hauptsächlich in PHP schreiben?
- Möchten Sie die UI hauptsächlich in JavaScript / TypeScript schreiben?
- Soll alles in einem einzigen Repository liegen, oder wollen Sie API und SPA voneinander trennen?
Der PHP-Weg
Blade
Blade ist die Standard-Template-Engine von Laravel. Sie geben aus Controllern und Routen Views zurück und der Server sendet fertiges HTML an den Browser. Vorteile- Integriert sich natürlich mit Laravels Routing, Validierung und Authentifizierung
- Man kommt in der Regel mit reinem PHP aus, geringe Lernkurve
- Gut für Seiten, bei denen SEO und schnelle Erstanzeige wichtig sind
- Bei Seitennavigation und Formularübermittlung wird häufig die gesamte Seite neu gerendert
- Komplexe Interaktionen erfordern JavaScript-Unterstützung
Livewire
Laravel Livewire baut auf Blade auf und ermöglicht dynamische UIs weiterhin PHP-zentriert. Interaktionen wie Modals, Suche oder Inline-Editing lassen sich mit einem Erlebnis nahe an React oder Vue umsetzen. Vorteile- Dynamische UIs als Erweiterung von PHP und Blade
- Leichte Integration mit Laravels State- und Validierungsmechanismen
- Lässt sich hervorragend mit Alpine.js kombinieren, wenn punktuell JavaScript ergänzt werden soll
- Bei komplexem Client-seitigem Zustand nicht so stark wie reine JavaScript-Frameworks
- Für große SPAs mit hohem Frontend-Anteil manchmal ungeeignet
PHP-first Starter Kits
Die Starter Kits von Laravel 13 enthalten für Teams, die PHP-zentriert bis hin zur dynamischen UI entwickeln möchten, eine Livewire-basierte Option. Ein rein Blade-basiertes Setup ist natürlich ebenfalls möglich, aber die als Starter Kit vorgesehene PHP-first-Option ist Livewire. Authentifizierung, Layouts und Vite-Konfiguration sind bereits vorbereitet, sodass Sie schnell starten können.JavaScript-Frameworks einsetzen
Inertia + React / Vue / Svelte
Inertia schlägt eine Brücke, damit Sie Laravels Routing, Controller und Authentifizierung weiter nutzen, aber die Seiten-Komponenten in React, Vue oder Svelte bauen. Sie trennen API und SPA nicht vollständig, sondern erstellen innerhalb einer Laravel-Anwendung eine moderne UI. Vorteile- Nutzt das Komponentenmodell von React / Vue / Svelte
- Routing und Authentifizierung bleiben in Laravel
- Backend und Frontend lassen sich in einem Repository verwalten
- Es gibt mehr zu lernen als bei einer reinen Blade-Lösung
- Kenntnisse in Node.js-Toolchain und TypeScript sind meist erforderlich
API und eigenständige SPA trennen
Sie können das Frontend vollständig von Laravel trennen und eine separate SPA oder Mobile-App auf die API zugreifen lassen. Das ist geeignet, wenn mehrere Clients dasselbe Backend nutzen sollen. Laravel übernimmt in diesem Fall vor allem folgende Aufgaben:- Bereitstellung der API-Routen
- Authentifizierung und Autorisierung (z. B. Sanctum)
- Formatierung der JSON-Antworten (z. B. Eloquent API Resources)
- Leichter Rollout auf mehrere Clients wie Web, Mobile oder Desktop
- Die Technologie-Entscheidung im Frontend ist von Laravel entkoppelt
- Authentifizierung, Datenabruf und Deployment müssen getrennt entworfen werden
- Der Aufbau ist komplexer als eine einzelne, in sich abgeschlossene Laravel-Anwendung
JavaScript-first Starter Kits
Mit den Starter Kits starten Sie mit einem bereits konfigurierten Setup aus Inertia, React / Vue / Svelte, Tailwind CSS und Vite. Da auch die Authentifizierungs-Screens von Anfang an vorhanden sind, können Sie sich auf die UI-Entwicklung konzentrieren.Assets mit Vite bündeln
Egal welchen Ansatz Sie wählen: In Laravel 13 wird in der Regel Vite verwendet, um CSS und JavaScript zu bauen. Bei Blade und Livewire werden schlanke Scripts und Styles gebündelt, bei Inertia der gesamte Frontend-Code der Anwendung. Die Vorteile von Vite:- Schnelles HMR während der lokalen Entwicklung
- Bundling und Versionierung der Produktions-Assets
- Integration mit der
@vite()-Direktive von Laravel
In den Starter Kits von Laravel 13 ist bereits eine Vite-basierte Frontend-Konfiguration vordefiniert.
Vergleich der Ansätze
| Ansatz | Passend für | Vorteile | Nachteile |
|---|---|---|---|
| Blade | Content-zentrierte Seiten, formularlastige Admin-Bereiche | Einfach zu erlernen. Nahtlose Integration mit Laravel | Bei komplexeren UIs häufigere Vollseiten-Refreshes |
| Livewire | PHP-zentrierte Business-Apps mit dynamischer UI | Reaktive UI ohne PHP zu verlassen | Client-seitiges State-Management etwas schwächer |
| Inertia + React / Vue / Svelte | Apps, die moderne UI und Laravel-Integration verbinden | SPA-Erlebnis in einem Repository | Erfordert JavaScript- / TypeScript-Kenntnisse |
| API + eigenständige SPA | Produkte mit mehreren Clients oder Mobile | Frontend lässt sich unabhängig deployen | Authentifizierung, Deployment und Betrieb sind komplexer |
Nächste Schritte
Blade-Templates
Frischen Sie die Grundlagen des Server-Side-Rendering auf.
Starter Kits
Vergleichen Sie die Startkonfigurationen für React, Vue, Svelte und Livewire.
Asset-Bundling mit Vite
Lernen Sie Dev-Server, HMR und den Produktions-Build kennen.
Einstieg in Inertia
Verstehen Sie, wie Inertia Laravel und JavaScript-Frameworks verbindet.