Laravel 12 Starter Kits erklärt: React, Vue und Livewire

Wenn Sie ein neues Laravel-Projekt beginnen, müssen Sie nicht alles von Grund auf neu erstellen. Laravel bietet Starter-Kits. Sie kümmern sich um die Grundlagen, wie Routen, Controller, Authentifizierung und Front-End-Gerüst Boilerplate-Code.

Mit Laravel 12wurden diese Starter Kits modernisiert, um zwei der heute beliebtesten JavaScript Single-Page Application Frontends zu unterstützen: React und Vuezu unterstützen, und bieten gleichzeitig die Möglichkeit, den einfacheren Ansatz mit Blade-Vorlagenzusammen mit Livewire Konfiguration. Jedes dieser Starterkits verfolgt einen etwas anderen Ansatz bei der Erstellung Ihrer App:

• React wenn Sie lieber mit einem komponentenbasierten Ansatz bauen

• Vue wenn Sie etwas bevorzugen, das mehr mit traditionellem JavaScript verwandt ist (z. B. kein JSX)

• Livewire wenn Sie es vorziehen, die meisten Dinge in PHP und Blade ohne viel JavaScript zu erledigen

In diesem Beitrag sehen wir uns an, was jedes Kit bietet, wie sie sich unterscheiden und welches Kit für Ihr nächstes Laravel 12-Projekt am sinnvollsten ist.

React Starter Kit

Wenn Sie eine hochgradig interaktive Webanwendung entwickeln, wie Trello, Slackoder GitHub, und gerne mit wiederverwendbaren UI-Komponenten arbeiten, ist das React-Starterkit eine gute Wahl. In React werden diese Teile als KomponentenDiese Komponenten sind in sich geschlossene Bausteine, die ihren eigenen Status verwalten, Daten von übergeordneten Komponenten empfangen und in Ihrer gesamten Anwendung wiederverwendet werden können.

Das Starterkit verwendet Inertia.js um React mit Laravel-Routen und -Controllern zu verbinden. Einfach ausgedrückt: Sie erhalten die Vorteile der Zusammenarbeit von Backend und Frontend. Laravel übernimmt die gesamte Backend-Logik, einschließlich Routing, Authentifizierung und Datenbankoperationen. In der Zwischenzeit kümmert sich React um das interaktive Frontend, so dass Ihre Seiten automatisch aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss. Sie brauchen keine benutzerdefinierte API zu erstellen, was die Dinge einfacher und schneller macht. Darüber hinaus wird das Kit mit TypeScript für Typsicherheit, TailwindCSS für schnelles Styling, und shadcn/ui für vorgefertigte UI-Komponenten. Dies bietet Ihnen eine solide, flexible Basis für die Erstellung von responsiven UIs.

Layouts und Varianten

Sobald Sie das React-Starterkit installiert haben, befindet sich der Großteil Ihres Frontend-Codes in resources/js. Standardmäßig verwendet Ihre Anwendung ein Sidebar-Layout, aber Sie können ganz einfach zu einem Header-Layout wechseln, indem Sie den Import am oberen Rand von resources/js/layouts/app-layout.tsx.

Das Layout der Seitenleiste selbst hat drei Varianten: Standard, "eingefügt" und "schwebend". Sie können die Variante wählen, die am besten zu Ihrer Anwendung passt, indem Sie die variant prop in resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Für Authentifizierungsseiten wie Anmeldung, Registrierung und Kennwortrücksetzung gibt es drei Layout-Optionen: einfach, Karte und geteilt.

Sie können leicht zwischen ihnen wechseln, indem Sie den Import oben in resources/js/layouts/auth-layout.tsx.

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue Starter Kit

Wenn Sie ein flexibles und einfach zu bedienendes Frontend wünschen, ist das Vue-Starterkit eine solide Wahl. Auch hier wird Inertia.js um Vue mit Laravel-Routen und -Controllern zu verbinden, so dass Sie interaktive Seiten erstellen können, die sich wie eine Single-Page-Applikation anfühlen, ohne eine eigene API zu benötigen. Das bedeutet, dass Sie die reaktiven Frontend-Funktionen von Vue erhalten, während Laravel die gesamte Backend-Logik übernimmt.

Das Kit wird mit der Vue 3 Zusammensetzung API, TypeScript für sichereren Code, TailwindCSS für schnelles Styling, und die shadcn/ui für wiederverwendbare UI-Komponenten. Zusammen erhalten Sie ein sauberes Setup, das die Erstellung von responsiven Oberflächen einfach und flexibel macht.

Layouts und Varianten

Der größte Teil des Vue-Frontend-Codes befindet sich in resources/jsorganisiert, um das Auffinden und Anpassen von Komponenten, Seiten, Layouts und Hooks zu erleichtern. Standardmäßig verwendet die App ein Sidebar-Layout, aber Sie können zu einem Header-Layout wechseln, indem Sie den Import oben in resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

Das Layout der Seitenleiste gibt es in drei Varianten: Standard, eingefügt und schwebend. Sie können diejenige auswählen, die am besten funktioniert, indem Sie die variant prop in resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Für Authentifizierungsseiten - wie Anmeldung, Registrierung und Kennwortrücksetzung - gibt es ebenfalls drei Layout-Optionen: einfach, Karte und geteilt. Um zwischen ihnen zu wechseln, aktualisieren Sie einfach den Import oben auf resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Wie bei React sind die Komponenten wiederverwendbar, so dass das Ändern von Layouts oder UI-Elementen kein Neuschreiben von Seiten erfordert.

Livewire Starter Kit

Wenn Sie einen eher traditionellen Model-View-Controller Ansatz für Ihr Frontend bevorzugen, indem Sie die Blade-Templating-Engine von Laravel verwenden, können Sie das Livewire-Starterkit eine gute Wahl. Livewire enthält ein wenig Magie, die auf Ihre Templates gestreut wird, indem es Ihr JavaScript entsprechend der Laravel-Livewire-Komponenten (im Wesentlichen ein Controller mit Status und einem eingebauten Satz von API-Methoden, um dem DOM mitzuteilen, wann es aktualisiert werden soll). Dadurch wird Ihr Code einfacher und Ihre Seiten können dennoch in Echtzeit auf Benutzereingaben reagieren. Das Kit enthält außerdem TailwindCSS für das Styling und die Flux UI Komponentenbibliothek für wiederverwendbare Oberflächenelemente.

Der größte Teil des Frontend-Codes befindet sich in resources/views, während sich die Backend-Logik für Livewire-Komponenten in app/Livewire. Sie finden hier wiederverwendbare Blade-Komponenten, Flux-Komponenten, seitenbezogene Livewire-Komponenten und Teilkomponenten, die alle so organisiert sind, dass Sie sie leicht ändern oder erweitern können.

Layouts und Varianten

Das Livewire-Starterkit wird mit zwei Hauptlayouts geliefert: Seitenleiste (Standard) und Kopfzeile. Sie können zwischen ihnen umschalten, indem Sie die Blade-Komponente in resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

Für die Authentifizierungsseiten (Anmeldung, Registrierung und Zurücksetzen des Kennworts) gibt es ebenfalls drei Layout-Optionen: einfach, Karte und geteilt. Um zwischen ihnen zu wechseln, müssen Sie nur die Blade-Komponente in resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

Wie bei React und Vue machen es die wiederverwendbaren Komponenten und die modularen Layouts von Livewire einfach, mit verschiedenen Looks zu experimentieren, ohne dass Sie Ihre Seiten von Grund auf neu schreiben müssen.

Schlussfolgerung

Die Laravel 12-Starterkits bieten Ihnen eine solide Grundlage, unabhängig davon, für welches Frontend Sie sich entscheiden. React ist ideal für vollständige Single-Page-Apps, Vue ist flexibel und einsteigerfreundlich, und Livewire bleibt größtenteils in PHP und Blade, unterstützt aber dennoch dynamische, reaktive Schnittstellen. Alle drei Kits enthalten wiederverwendbare Komponenten, modulare Layouts und integriertes Styling, so dass es einfach ist, mit Designs zu experimentieren, ohne Seiten neu schreiben zu müssen. Für diejenigen, die wirklich keine Lust haben, Frontend-Code zu schreiben und sich für Livewire entschieden haben, können Sie auch Laravel Echo und Reverb hinzufügen, um Ihre eigenen Websocket-Server zu starten!

Wenn Sie gerade erst mit Laravel anfangen, gibt es eine Menge an einsteigerfreundlichen Ressourcen. Die Mitglieder der Laravel-Community teilen mit Ihnen ihre Lieblingsempfehlungen.