> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# Starter Kits

> So richten Sie mit den Starter Kits von Laravel Authentifizierung und UI im Handumdrehen ein.

## 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.

<Warning>
  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.
</Warning>

## Verfügbare Starter Kits

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

<CardGroup cols={2}>
  <Card title="React" icon="react">
    Moderne SPA mit React 19, TypeScript, Tailwind 4 und [shadcn/ui](https://ui.shadcn.com).
    Dank [Inertia.js](https://inertiajs.com) können Sie React nutzen und gleichzeitig serverseitiges Routing beibehalten.
  </Card>

  <Card title="Vue" icon="vuejs">
    Setzt auf Vue 3 Composition API, TypeScript, Tailwind und [shadcn-vue](https://www.shadcn-vue.com/).
    Wie bei React wird die Serverseite via Inertia.js angebunden.
  </Card>

  <Card title="Livewire" icon="bolt">
    [Livewire](https://livewire.laravel.com) 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](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    SPA mit Svelte 5, TypeScript, Tailwind und [shadcn-svelte](https://www.shadcn-svelte.com/).
    In Kombination mit Inertia.js lässt sich ein modernes Frontend aufbauen.
  </Card>
</CardGroup>

### 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         |

<Tip>
  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.
</Tip>

<Info>
  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](/de/frontend).
</Info>

## 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.

<Steps>
  <Step title="Laravel-Installer installieren">
    Falls noch nicht geschehen, beziehen Sie den Laravel-Installer über Composer.

    ```bash theme={null}
    composer global require laravel/installer
    ```
  </Step>

  <Step title="Neue Anwendung erstellen">
    Führen Sie den Befehl `laravel new` aus. Ein interaktiver Prompt einschließlich Starter-Kit-Auswahl erscheint.

    ```bash theme={null}
    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.
  </Step>

  <Step title="Frontend-Abhängigkeiten installieren">
    ```bash theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="Datenbank vorbereiten">
    Prüfen Sie die Datenbank-Einstellungen in der Datei `.env` und führen Sie die Migrationen aus.

    ```bash theme={null}
    php artisan migrate
    ```
  </Step>

  <Step title="Entwicklungsserver starten">
    ```bash theme={null}
    composer run dev
    ```

    Wenn Sie im Browser `http://localhost:8000` aufrufen, sehen Sie in der Navigation die Links „Register" und „Log in".
  </Step>
</Steps>

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.

<Tabs>
  <Tab title="React">
    Bearbeiten Sie `resources/js/layouts/app-layout.tsx`.

    ```tsx theme={null}
    // Sidebar-Layout (Standard)
    import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

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

  <Tab title="Vue">
    Bearbeiten Sie `resources/js/layouts/AppLayout.vue`.

    ```js theme={null}
    // Sidebar-Layout (Standard)
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

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

  <Tab title="Livewire">
    Bearbeiten Sie `resources/views/layouts/app.blade.php`.

    ```blade theme={null}
    {{-- Auf Header-Layout wechseln --}}
    <x-layouts::app.header>
        <flux:main container>
            {{ $slot }}
        </flux:main>
    </x-layouts::app.header>
    ```
  </Tab>

  <Tab title="Svelte">
    Bearbeiten Sie `resources/js/layouts/AppLayout.svelte`.

    ```js theme={null}
    // Sidebar-Layout (Standard)
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

    // Auf Header-Layout wechseln
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### Layout der Authentifizierungsseiten wechseln

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

<Tabs>
  <Tab title="React">
    Bearbeiten Sie `resources/js/layouts/auth-layout.tsx`.

    ```tsx theme={null}
    // Simple-Layout (Standard)
    import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

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

  <Tab title="Vue">
    Bearbeiten Sie `resources/js/layouts/AuthLayout.vue`.

    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

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

  <Tab title="Livewire">
    Bearbeiten Sie `resources/views/layouts/auth.blade.php`.

    ```blade theme={null}
    <x-layouts::auth.split>
        {{ $slot }}
    </x-layouts::auth.split>
    ```
  </Tab>

  <Tab title="Svelte">
    Bearbeiten Sie `resources/js/layouts/AuthLayout.svelte`.

    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

    // Auf Split-Layout wechseln
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

### 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:

```php theme={null}
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)

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

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

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

## Hinweise

<Warning>
  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.
</Warning>

## Nächste Schritte

<Card title="Einführung in die Authentifizierung" icon="lock" href="/de/authentication">
  Vertiefen Sie Ihre Kenntnisse zu Laravels Authentifizierungsfunktionen – etwa zur Verwendung der `Auth`-Fassade und zum Schutz von Routen.
</Card>


## Related topics

- [Ein Laravel-Starter-Kit erstellen](/de/advanced/starter-kit-creation.md)
- [Laravel Fortify und Starter-Kits](/de/advanced/fortify.md)
- [Laravel Console Starter](/de/packages/laravel-console-starter/index.md)
- [Tutorial - Laravel Console Starter](/de/packages/laravel-console-starter/tutorial.md)
- [Installation](/de/installation.md)