> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend
> Ein Einstiegsleitfaden, um in Laravel 13 zwischen Blade, Livewire, Inertia, React, Vue, Svelte, SPA und Vite zu entscheiden.
## Ü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?
```mermaid theme={null}
flowchart TD
A["Laravel-Anwendung"] --> B{"Wo bauen Sie die UI zusammen?"}
A --> G["Assets mit Vite bauen"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + eigenständige SPA"]
C --> C1["HTML wird serverseitig zurückgegeben"]
D --> D1["Dynamische UI PHP-geführt"]
E --> E1["SPA-ähnliches Erlebnis in einem Repository"]
F --> F1["Anbindung an separates Frontend oder Mobile-App"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Der PHP-Weg
### Blade
[Blade](/de/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
**Nachteile**
* Bei Seitennavigation und Formularübermittlung wird häufig die gesamte Seite neu gerendert
* Komplexe Interaktionen erfordern JavaScript-Unterstützung
Blade eignet sich für Admin-Panels, interne Tools, inhaltsgetriebene Seiten und formularlastige Anwendungen.
### Livewire
[Laravel Livewire](https://livewire.laravel.com) 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
**Nachteile**
* Bei komplexem Client-seitigem Zustand nicht so stark wie reine JavaScript-Frameworks
* Für große SPAs mit hohem Frontend-Anteil manchmal ungeeignet
Wenn Sie mehr über Livewire erfahren möchten, sehen Sie sich [Einstieg in Livewire](/de/blog/livewire-introduction) an.
### PHP-first Starter Kits
Die [Starter Kits](/de/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](https://inertiajs.com) 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
**Nachteile**
* Es gibt mehr zu lernen als bei einer reinen Blade-Lösung
* Kenntnisse in Node.js-Toolchain und TypeScript sind meist erforderlich
Die offiziellen Starter Kits von Laravel 13 bieten von Anfang an **React / Vue / Svelte + Inertia** zur Auswahl.
Details finden Sie in [Einstieg in Inertia](/de/blog/inertia-introduction), [Einstieg in React](/de/blog/react-introduction), [Einstieg in Vue](/de/blog/vue-introduction) und [Einstieg in Svelte](/de/blog/svelte-introduction).
### 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](/de/sanctum))
* Formatierung der JSON-Antworten (z. B. [Eloquent API Resources](/de/eloquent-resources))
**Vorteile**
* Leichter Rollout auf mehrere Clients wie Web, Mobile oder Desktop
* Die Technologie-Entscheidung im Frontend ist von Laravel entkoppelt
**Nachteile**
* 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](/de/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](/de/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
Frischen Sie die Grundlagen des Server-Side-Rendering auf.
Vergleichen Sie die Startkonfigurationen für React, Vue, Svelte und Livewire.
Lernen Sie Dev-Server, HMR und den Produktions-Build kennen.
Verstehen Sie, wie Inertia Laravel und JavaScript-Frameworks verbindet.
## Related topics
- [Ein Laravel-Starter-Kit erstellen](/de/advanced/starter-kit-creation.md)
- [Wissen, das Sie vor dem Einstieg in Laravel benötigen](/de/true-tutorial.md)
- [Asset-Bundling mit Vite](/de/vite.md)
- [Installation](/de/installation.md)
- [Laravel Fortify und Starter-Kits](/de/advanced/fortify.md)