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

> Hoe je met de starter kits van Laravel snel authenticatie en een UI opzet

## Wat zijn starter kits

Starter kits zijn officiële scaffolding die als startpunt voor je Laravel-applicatie dient.
Je kunt er in één keer authenticatiefunctionaliteit mee opzetten — inloggen, registreren, wachtwoordreset, e-mailverificatie — plus de bijbehorende UI.

Kies simpelweg een starter kit bij het aanmaken van een applicatie met `laravel new`, en alle routes, controllers, views en frontendcode rondom authenticatie worden automatisch gegenereerd.
Alle gegenereerde code staat in je eigen applicatie, dus je kunt alles vrij aanpassen.

<Warning>
  In Laravel 13 zijn de vroegere **Breeze** en **Jetstream** afgeschaft.
  Gebruik voor nieuwe projecten de hieronder beschreven starter kits.
  Bestaande projecten met Breeze of Jetstream blijven gewoon werken, maar voor nieuwe ontwikkeling worden ze niet aanbevolen.
</Warning>

## Beschikbare starter kits

In Laravel 13 worden de volgende vier starter kits aangeboden.

<CardGroup cols={2}>
  <Card title="React" icon="react">
    Een moderne SPA met React 19, TypeScript, Tailwind 4 en [shadcn/ui](https://ui.shadcn.com).
    Dankzij [Inertia.js](https://inertiajs.com) gebruik je React terwijl de server-side routing behouden blijft.
  </Card>

  <Card title="Vue" icon="vuejs">
    Gebruikt de Vue 3 Composition API, TypeScript, Tailwind en [shadcn-vue](https://www.shadcn-vue.com/).
    Net als bij React verloopt de koppeling met de server via Inertia.js.
  </Card>

  <Card title="Livewire" icon="bolt">
    Met [Livewire](https://livewire.laravel.com) bouw je dynamische UI's met alleen PHP.
    Ideaal voor teams die vooral met Blade-templates werken of JavaScript-frameworks willen vermijden. Gebruikt [Flux UI](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    Een SPA met Svelte 5, TypeScript, Tailwind en [shadcn-svelte](https://www.shadcn-svelte.com/).
    In combinatie met Inertia.js bouw je een moderne frontend.
  </Card>
</CardGroup>

### Welke moet je kiezen

| Starter kit | Geschikt voor teams die                               |
| ----------- | ----------------------------------------------------- |
| React       | Vertrouwd zijn met het React-ecosysteem en TypeScript |
| Vue         | Ervaring hebben met Vue of Nuxt                       |
| Livewire    | Vooral met PHP en Blade willen ontwikkelen            |
| Svelte      | Ervaring hebben met Svelte of SvelteKit               |

<Tip>
  Welke je ook kiest, de authenticatiefunctionaliteit is exact hetzelfde. Kies de frontendtechnologie waar je team het meest vertrouwd mee is.
</Tip>

<Info>
  Wil je eerst het totaalplaatje zien van de verschillen tussen Blade, Livewire, Inertia en een losstaande SPA, lees dan eerst [Frontend](/nl/frontend) — dat maakt kiezen makkelijker.
</Info>

## Installatie

Je selecteert een starter kit bij het aanmaken van een project. Voer het commando `laravel new` uit en je kunt interactief een starter kit kiezen.

<Steps>
  <Step title="De Laravel installer installeren">
    Nog niet geïnstalleerd? Haal de Laravel installer op via Composer.

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

  <Step title="Een nieuwe applicatie maken">
    Voer het commando `laravel new` uit. Je krijgt interactieve prompts, waaronder de keuze van een starter kit.

    ```bash theme={null}
    laravel new my-app
    ```

    Kies in de prompt **React**, **Vue**, **Livewire** of **Svelte**.
    Als authenticatieprovider kun je bovendien kiezen tussen de standaard Laravel-authenticatie en WorkOS AuthKit.
  </Step>

  <Step title="De frontend-afhankelijkheden installeren">
    ```bash theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="De database voorbereiden">
    Controleer de database-instellingen in het `.env`-bestand en voer daarna de migraties uit.

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

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

    Open `http://localhost:8000` in je browser; in de navigatie zie je de links "Register" en "Log in".
  </Step>
</Steps>

Na installatie van een starter kit zijn de volgende authenticatiefuncties direct beschikbaar.

| Functie           | URL                 |
| ----------------- | ------------------- |
| Registreren       | `/register`         |
| Inloggen          | `/login`            |
| Wachtwoordreset   | `/forgot-password`  |
| E-mailverificatie | `/email/verify`     |
| Profiel bewerken  | `/settings/profile` |

## Een starter kit aanpassen

Alle gegenereerde code staat in je eigen applicatie, dus je kunt hem vrij wijzigen.
Het merendeel van de frontendcode staat in de map `resources/js` (bij Livewire is dat Blade, dus `resources/views`).

### Wisselen van layout

Elke starter kit heeft twee soorten layouts: "sidebar" en "header".
De standaard is de sidebar-layout.

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

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

    // Wisselen naar de header-layout
    import AppLayoutTemplate from '@/layouts/app/app-header-layout';
    ```
  </Tab>

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

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

    // Wisselen naar de header-layout
    import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
    ```
  </Tab>

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

    ```blade theme={null}
    {{-- Wisselen naar de header-layout --}}
    <x-layouts::app.header>
        <flux:main container>
            {{ $slot }}
        </flux:main>
    </x-layouts::app.header>
    ```
  </Tab>

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

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

    // Wisselen naar de header-layout
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### De layout van authenticatiepagina's wijzigen

Ook voor de login- en registratiepagina's kun je kiezen uit drie layouts: "simple", "card" en "split".

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

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

    // Wisselen naar de split-layout
    import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
    ```
  </Tab>

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

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

    // Wisselen naar de split-layout
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';
    ```
  </Tab>

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

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

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

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

    // Wisselen naar de split-layout
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

### De registratielogica aanpassen

Starter kits gebruiken actieklassen in de map `app/Actions/Fortify` voor het verwerken van registraties en wachtwoordresets.
Wil je bijvoorbeeld een telefoonnummerveld toevoegen bij registratie, bewerk dan `CreateNewUser.php`.

```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']),
    ]);
}
```

## WorkOS AuthKit-authenticatie

Bij het uitvoeren van `laravel new` kun je ook **WorkOS AuthKit** kiezen als authenticatieprovider.
Met WorkOS AuthKit krijg je de volgende extra functies:

* Sociale authenticatie (Google, Microsoft, GitHub, Apple)
* Passkey-authenticatie
* "Magic Auth" via e-mail
* SSO (single sign-on)

<Info>
  Voor het gebruik van WorkOS AuthKit is een WorkOS-account nodig. Tot 1 miljoen maandelijks actieve gebruikers is het gratis.
</Info>

Kies je voor WorkOS, stel dan de volgende omgevingsvariabelen in via het `.env`-bestand.

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

## Aandachtspunten

<Warning>
  Een starter kit kies je **bij het aanmaken van het project**.
  Je kunt hem niet achteraf toevoegen aan een bestaand project.
  Heb je een authenticatie-UI nodig, kies dan een starter kit bij een nieuw project of implementeer de authenticatie handmatig.
</Warning>

## Volgende stap

<Card title="Introductie authenticatie" icon="lock" href="/nl/authentication">
  Leer de authenticatiefunctionaliteit van Laravel verder kennen, zoals het gebruik van de `Auth`-facade en het beschermen van routes.
</Card>


## Related topics

- [Een Laravel starter kit maken](/nl/advanced/starter-kit-creation.md)
- [Laravel Fortify en de starter kits](/nl/advanced/fortify.md)
- [Laravel Maestro — de orchestrator voor starter kit-ontwikkeling](/nl/blog/maestro-introduction.md)
- [Laravel Console Starter](/nl/packages/laravel-console-starter/index.md)
- [Laravel Chisel — een bibliotheek voor post-installatiescripts van starter kits](/nl/blog/chisel-introduction.md)