Starter kits

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.

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.

Beschikbare starter kits

In Laravel 13 worden de volgende vier starter kits aangeboden.

React

Een moderne SPA met React 19, TypeScript, Tailwind 4 en shadcn/ui. Dankzij Inertia.js gebruik je React terwijl de server-side routing behouden blijft.

Vue

Gebruikt de Vue 3 Composition API, TypeScript, Tailwind en shadcn-vue. Net als bij React verloopt de koppeling met de server via Inertia.js.

Livewire

Met Livewire 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.

Svelte

Een SPA met Svelte 5, TypeScript, Tailwind en shadcn-svelte. In combinatie met Inertia.js bouw je een moderne frontend.

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

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

Wil je eerst het totaalplaatje zien van de verschillen tussen Blade, Livewire, Inertia en een losstaande SPA, lees dan eerst Frontend — dat maakt kiezen makkelijker.

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.

De Laravel installer installeren

Nog niet geïnstalleerd? Haal de Laravel installer op via Composer.

composer global require laravel/installer

Een nieuwe applicatie maken

Voer het commando laravel new uit. Je krijgt interactieve prompts, waaronder de keuze van een starter kit.

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.

De frontend-afhankelijkheden installeren

cd my-app
npm install && npm run build

De database voorbereiden

Controleer de database-instellingen in het .env-bestand en voer daarna de migraties uit.

php artisan migrate

De ontwikkelserver starten

composer run dev

Open http://localhost:8000 in je browser; in de navigatie zie je de links “Register” en “Log in”.

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.

React
Vue
Livewire
Svelte

Bewerk resources/js/layouts/app-layout.tsx.

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

// Wisselen naar de header-layout
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Bewerk resources/js/layouts/AppLayout.vue.

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

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

Bewerk resources/views/layouts/app.blade.php.

{{-- Wisselen naar de header-layout --}}
<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Bewerk resources/js/layouts/AppLayout.svelte.

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

// Wisselen naar de header-layout
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

De layout van authenticatiepagina’s wijzigen

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

React
Vue
Livewire
Svelte

Bewerk resources/js/layouts/auth-layout.tsx.

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

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

Bewerk resources/js/layouts/AuthLayout.vue.

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

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

Bewerk resources/views/layouts/auth.blade.php.

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

Bewerk resources/js/layouts/AuthLayout.svelte.

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

// Wisselen naar de split-layout
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

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.

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)

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

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

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

Aandachtspunten

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.

Volgende stap

Introductie authenticatie

Leer de authenticatiefunctionaliteit van Laravel verder kennen, zoals het gebruik van de Auth-facade en het beschermen van routes.

Aan de slag

Basis

Request-verwerking

Database

Authenticatie

Helpers en externe communicatie

Testen en deployment

AI-ontwikkelondersteuning

Wat zijn starter kits

Beschikbare starter kits

React

Vue

Livewire

Svelte

Welke moet je kiezen

Installatie

Een starter kit aanpassen

Wisselen van layout

De layout van authenticatiepagina’s wijzigen

De registratielogica aanpassen

WorkOS AuthKit-authenticatie

Aandachtspunten

Volgende stap

Introductie authenticatie

​Wat zijn starter kits

​Beschikbare starter kits

React

Vue

Livewire

Svelte

​Welke moet je kiezen

​Installatie

​Een starter kit aanpassen

​Wisselen van layout

​De layout van authenticatiepagina’s wijzigen

​De registratielogica aanpassen

​WorkOS AuthKit-authenticatie

​Aandachtspunten

​Volgende stap

Introductie authenticatie

Wat zijn starter kits

Beschikbare starter kits

Welke moet je kiezen

Installatie

Een starter kit aanpassen

Wisselen van layout

De layout van authenticatiepagina’s wijzigen

De registratielogica aanpassen

WorkOS AuthKit-authenticatie

Aandachtspunten

Volgende stap