Starter Kits - Knowledge of Laravel

Was sind Starter Kits

Starter Kits sind offizielle Scaffoldings, die als Ausgangspunkt für eine Laravel-Anwendung dienen. Sie richten Authentifizierungsfunktionen wie Login, Registrierung, Passwort-Reset und E-Mail-Verifizierung samt passender Benutzeroberfläche in einem Zug ein. Wenn Sie beim Erzeugen einer Anwendung per laravel new ein Starter Kit auswählen, werden Routen, Controller, Views und Frontend-Code rund um die Authentifizierung automatisch generiert. Da sich der gesamte generierte Code innerhalb Ihrer eigenen Anwendung befindet, können Sie ihn frei anpassen.

In Laravel 13 wurden die bisherigen Starter Kits Breeze und Jetstream eingestellt. Verwenden Sie in neuen Projekten die weiter unten vorgestellten Starter Kits. Bestehende Projekte auf Basis von Breeze oder Jetstream funktionieren weiterhin, werden für neue Entwicklungen jedoch nicht mehr empfohlen.

Verfügbare Starter Kits

In Laravel 13 stehen die folgenden vier Starter Kits zur Verfügung.

React

Moderne SPA mit React 19, TypeScript, Tailwind 4 und shadcn/ui. Dank Inertia.js können Sie React nutzen und gleichzeitig serverseitiges Routing beibehalten.

Vue

Setzt auf Vue 3 Composition API, TypeScript, Tailwind und shadcn-vue. Wie bei React wird die Serverseite via Inertia.js angebunden.

Livewire

Livewire ermöglicht dynamische UIs allein mit PHP. Ideal für Teams, die vor allem mit Blade-Templates arbeiten oder ohne JavaScript-Framework auskommen möchten. Kommt mit Flux UI.

Svelte

SPA mit Svelte 5, TypeScript, Tailwind und shadcn-svelte. In Kombination mit Inertia.js lässt sich ein modernes Frontend aufbauen.

Welches soll ich wählen?

Starter Kit	Passt zu Teams
React	Vertraut mit dem React-Ökosystem und TypeScript
Vue	Mit Erfahrung in Vue oder Nuxt
Livewire	Möchte primär mit PHP und Blade entwickeln
Svelte	Mit Erfahrung in Svelte oder SveltekKit

Egal welches Starter Kit Sie wählen – die Authentifizierungsfunktionen sind identisch. Entscheiden Sie sich für die Frontend-Technologie, mit der Ihr Team am besten vertraut ist.

Wenn Sie sich zunächst einen Überblick über die Unterschiede zwischen Blade, Livewire, Inertia und eigenständigen SPAs verschaffen möchten, empfiehlt sich zuerst der Abschnitt Frontend.

Installation

Ein Starter Kit wählen Sie beim Erstellen des Projekts aus. Beim Ausführen von laravel new können Sie es interaktiv auswählen.

Laravel-Installer installieren

Falls noch nicht geschehen, beziehen Sie den Laravel-Installer über Composer.

composer global require laravel/installer

Neue Anwendung erstellen

Führen Sie den Befehl laravel new aus. Ein interaktiver Prompt einschließlich Starter-Kit-Auswahl erscheint.

laravel new my-app

Wählen Sie im Prompt eines der Kits React, Vue, Livewire oder Svelte aus. Als Authentifizierungs-Provider können Sie die Standard-Laravel-Authentifizierung oder WorkOS AuthKit wählen.

Frontend-Abhängigkeiten installieren

cd my-app
npm install && npm run build

Datenbank vorbereiten

Prüfen Sie die Datenbank-Einstellungen in der Datei .env und führen Sie die Migrationen aus.

php artisan migrate

Entwicklungsserver starten

composer run dev

Wenn Sie im Browser http://localhost:8000 aufrufen, sehen Sie in der Navigation die Links „Register” und „Log in”.

Nach der Installation eines Starter Kits stehen die folgenden Authentifizierungsfunktionen sofort zur Verfügung:

Funktion	URL
Registrierung	`/register`
Login	`/login`
Passwort-Reset	`/forgot-password`
E-Mail-Verifizierung	`/email/verify`
Profil bearbeiten	`/settings/profile`

Starter Kits anpassen

Da sich der gesamte generierte Code in Ihrer eigenen Anwendung befindet, können Sie ihn beliebig ändern. Der Großteil des Frontend-Codes liegt im Verzeichnis resources/js (bei Livewire in resources/views, da Blade verwendet wird).

Layout wechseln

Jedes Starter Kit bringt zwei Layouts mit: „Sidebar” und „Header”. Standardmäßig ist das Sidebar-Layout aktiv.

React
Vue
Livewire
Svelte

Bearbeiten Sie resources/js/layouts/app-layout.tsx.

// Sidebar-Layout (Standard)
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// Auf Header-Layout wechseln
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Bearbeiten Sie resources/js/layouts/AppLayout.vue.

// Sidebar-Layout (Standard)
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// Auf Header-Layout wechseln
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Bearbeiten Sie resources/views/layouts/app.blade.php.

{{-- Auf Header-Layout wechseln --}}
<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Bearbeiten Sie resources/js/layouts/AppLayout.svelte.

// Sidebar-Layout (Standard)
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// Auf Header-Layout wechseln
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

Layout der Authentifizierungsseiten wechseln

Für Login- und Registrierungsseiten stehen die drei Layouts „simple”, „card” und „split” zur Auswahl.

React
Vue
Livewire
Svelte

Bearbeiten Sie resources/js/layouts/auth-layout.tsx.

// Simple-Layout (Standard)
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

// Auf Split-Layout wechseln
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Bearbeiten Sie resources/js/layouts/AuthLayout.vue.

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

// Auf Split-Layout wechseln
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Bearbeiten Sie resources/views/layouts/auth.blade.php.

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

Bearbeiten Sie resources/js/layouts/AuthLayout.svelte.

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

// Auf Split-Layout wechseln
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

Registrierungslogik anpassen

Für Registrierung und Passwort-Reset nutzen die Starter Kits Action-Klassen aus dem Verzeichnis app/Actions/Fortify. Wenn Sie etwa bei der Registrierung ein Feld für die Telefonnummer ergänzen möchten, passen Sie CreateNewUser.php an:

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}

Authentifizierung mit WorkOS AuthKit

Beim Ausführen von laravel new können Sie als Authentifizierungs-Provider auch WorkOS AuthKit wählen. Mit WorkOS AuthKit stehen zusätzlich folgende Funktionen bereit:

Social Logins (Google, Microsoft, GitHub, Apple)
Passkey-Authentifizierung
„Magic Auth” per E-Mail
SSO (Single Sign-On)

Für die Nutzung von WorkOS AuthKit ist ein WorkOS-Konto erforderlich. Bis zu 1 Million monatlich aktive Nutzer sind kostenlos.

Wenn Sie WorkOS ausgewählt haben, setzen Sie in der Datei .env die folgenden Umgebungsvariablen:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

Hinweise

Starter Kits werden beim Erstellen des Projekts ausgewählt. Sie können nicht nachträglich zu einem bestehenden Projekt hinzugefügt werden. Wenn Sie eine Authentifizierungs-UI benötigen, wählen Sie das Starter Kit in einem neuen Projekt aus oder implementieren Sie die Authentifizierung manuell.

Nächste Schritte

Einführung in die Authentifizierung

Vertiefen Sie Ihre Kenntnisse zu Laravels Authentifizierungsfunktionen – etwa zur Verwendung der Auth-Fassade und zum Schutz von Routen.

​Was sind Starter Kits

​Verfügbare Starter Kits

React

Vue

Livewire

Svelte

​Welches soll ich wählen?

​Installation

​Starter Kits anpassen

​Layout wechseln

​Layout der Authentifizierungsseiten wechseln

​Registrierungslogik anpassen

​Authentifizierung mit WorkOS AuthKit

​Hinweise

​Nächste Schritte

Einführung in die Authentifizierung

Was sind Starter Kits

Verfügbare Starter Kits

Welches soll ich wählen?

Installation

Starter Kits anpassen

Layout wechseln

Layout der Authentifizierungsseiten wechseln

Registrierungslogik anpassen

Authentifizierung mit WorkOS AuthKit

Hinweise

Nächste Schritte