Introductie Svelte — de basis voor Inertia × Laravel

Wat is Svelte

Svelte neemt een unieke positie in onder de JavaScript-frameworks. Waar React en Vue als runtimelibrary’s werken, werkt Svelte als compiler. Componenten worden tijdens de build omgezet naar pure JavaScript, waardoor er geen overbodige frameworkcode naar de browser hoeft te worden gestuurd. Het grootste kenmerk van Svelte is dat het geen virtual DOM gebruikt. Wanneer de state verandert, werkt de code die Svelte tijdens het compileren heeft gegenereerd de DOM direct bij. Dit maakt een extreem lichte en snelle UI mogelijk.

Deze pagina behandelt de combinatie van Svelte 5 en Inertia v3. De starter kits van Laravel 13 gebruiken deze opzet standaard.

De runes van Svelte 5

Svelte 5 (uitgebracht in 2024) introduceerde een nieuw reactiviteitssysteem genaamd runes. Je declareert reactieve state met speciale functies (runes) zoals $state, $derived en $effect. Anders dan de impliciete reactiviteit van Svelte 4 en eerder is dit ontwerp expliciet en voorspelbaar.

<script lang="ts">
    let count = $state(0)

    function increment() {
        count++
    }
</script>

<button onclick={increment}>{count}</button>

De Svelte starter kit van Laravel gebruikt standaard Svelte 5 + TypeScript. Alle voorbeelden op deze pagina zijn daarom in TypeScript (lang="ts") geschreven.

De positie binnen Laravel

Geschiedenis

De relatie tussen Svelte en Laravel is vergeleken met Vue en React nog erg jong: de opname in de officiële starter kits is de eerste officiële ondersteuning. Met de officiële toevoeging van Svelte aan de starter kits in Laravel 13 (2026) werd Svelte een van de officiële frontendkeuzes binnen het Laravel-ecosysteem. Het wordt op gelijke voet met Vue en React behandeld en is te selecteren in de interactieve prompt van laravel new. Het framework is bij Laravel-gebruikers nog niet zo bekend, maar het kenmerkt zich door een lichte bundel dankzij de compiler en een eenvoudige syntaxis — stap je over van Vue of React, dan zul je misschien verbaasd zijn hoe weinig je hoeft te schrijven.

De huidige mainstream: Inertia × Svelte

De belangrijkste manier om Svelte in Laravel te gebruiken is tegenwoordig Inertia × Svelte. Inertia realiseert een “moderne monoliet”-architectuur waarbij je zonder een API te ontwerpen data rechtstreeks vanuit Laravel-controllers aan Svelte-componenten doorgeeft.

Setup

Via een starter kit (aanbevolen)

Voor een nieuw project is een starter kit de makkelijkste route.

laravel new my-app

Kies je in de interactieve prompt voor Svelte, dan wordt dit allemaal automatisch opgezet:

inertiajs/inertia-laravel (server-side adapter)
@inertiajs/svelte (clientadapter)
svelte + @sveltejs/vite-plugin-svelte (Svelte 5 zelf en de Vite-plugin)
TypeScript + svelte-check
Tailwind CSS + de shadcn-svelte-componentlibrary
De middleware HandleInertiaRequests
Authenticatieschermen zoals inloggen en registreren (al geïmplementeerd met Inertia + Svelte + TypeScript)

Handmatige installatie

Voeg je Inertia toe aan een bestaand project, dan installeer je de server- en clientzijde afzonderlijk.

# Serverzijde (PHP)
composer require inertiajs/inertia-laravel

# Clientzijde (JavaScript)
npm install @inertiajs/svelte @inertiajs/vite svelte
npm install --save-dev @sveltejs/vite-plugin-svelte svelte-check typescript

Voeg vervolgens de Svelte-plugin en de Inertia Vite-plugin toe aan vite.config.ts.

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import inertia from '@inertiajs/vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.ts'],
            refresh: true,
        }),
        svelte(),
        inertia(),
    ],
})

Start de Inertia-app in resources/js/app.ts. Omdat de @inertiajs/vite-plugin het automatisch oplossen en mounten van pagina’s verzorgt, volstaat een minimaal entrypoint.

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp()

Zie de officiële Inertia-documentatie voor de details van een handmatige installatie (zoals het instellen van de roottemplate en het registreren van de middleware).

Directorystructuur

In de starter kits plaats je Svelte-paginacomponenten in de directory resources/js/pages/.

resources/js/
├── app.ts             # Startpunt van de Inertia-app
├── components/        # Herbruikbare UI-componenten
│   └── ui/            # shadcn-svelte-componenten
├── layouts/           # Layoutcomponenten
│   ├── AppLayout.svelte
│   └── AuthLayout.svelte
├── lib/               # Utilityfuncties en Svelte-runemodules
├── pages/             # Inertia-paginacomponenten (corresponderen met controllernamen)
│   ├── auth/
│   │   ├── Login.svelte
│   │   └── Register.svelte
│   ├── Dashboard.svelte
│   └── posts/
│       ├── Index.svelte
│       ├── Create.svelte
│       └── Show.svelte
└── types/             # TypeScript-typedefinities

Schrijf je Inertia::render('posts/Index', [...]), dan is resources/js/pages/posts/Index.svelte de bijbehorende component.

De basisstructuur van een Svelte-bestand

Een .svelte-bestand bestaat uit drie blokken: <script>, template en <style>.

<script lang="ts">
    // Logica (TypeScript)
    let name = $state('Laravel')
</script>

<!-- Template (HTML-achtige notatie) -->
<h1>Hello, {name}!</h1>

<style>
    /* Scoped CSS (geldt alleen voor deze component) */
    h1 {
        color: #ff2d20;
    }
</style>

De structuur lijkt op een Single File Component (SFC) van Vue, maar kenmerkend is dat je in de template en het script minder hoeft te schrijven. Omdat <style> standaard scoped is, hoef je je geen zorgen te maken over botsende klassenamen.

Templatesyntaxis

Variabelen en expressies invoegen

Binnen de template gebruik je {} om JavaScript-waarden of -expressies in te voegen.

<script lang="ts">
    let name = $state('wereld')
    let count = $state(3)
</script>

<p>Hallo, {name}!</p>
<p>Het dubbele is {count * 2}</p>

`{#if}` — voorwaarden

<script lang="ts">
    let isLoggedIn = $state(false)
    let role = $state('editor')
</script>

{#if isLoggedIn}
    <p>Welkom!</p>
{:else if role === 'admin'}
    <p>Ingelogd als beheerder</p>
{:else}
    <a href="/login">Inloggen</a>
{/if}

Dit komt overeen met v-if / v-else in Vue of de ternaire operator in React.

`{#each}` — lijsten renderen

<script lang="ts">
    type Post = { id: number; title: string }
    let posts = $state<Post[]>([
        { id: 1, title: 'Eerste post' },
        { id: 2, title: 'Tweede post' },
    ])
</script>

<ul>
    {#each posts as post (post.id)}
        <li>{post.title}</li>
    {/each}
</ul>

(post.id) is de key-aanduiding, die wordt gebruikt voor efficiënte diff-updates. Dit komt overeen met v-for in Vue of Array.map() in React.

`bind:` — two-way binding

Met bind:value synchroniseer je de waarde van een formulierelement in twee richtingen met een reactieve variabele.

<script lang="ts">
    let title = $state('')
    let agreed = $state(false)
    let role = $state('viewer')
</script>

<!-- Tekstinvoer -->
<input bind:value={title} type="text" />
<p>Invoer: {title}</p>

<!-- Checkbox -->
<input bind:checked={agreed} type="checkbox" />
<p>Akkoord: {agreed}</p>

<!-- Selectbox -->
<select bind:value={role}>
    <option value="viewer">Lezer</option>
    <option value="editor">Redacteur</option>
    <option value="admin">Beheerder</option>
</select>

Dit komt overeen met v-model in Vue. In React moest je zelf een onChange-handler schrijven, maar in Svelte doe je dit declaratief met bind:.

De basis van paginacomponenten

Een Inertia-paginacomponent is een gewone Svelte-component. De data die je vanuit de Laravel-controller doorgeeft, ontvang je als props.

Controller

// app/Http/Controllers/PostController.php
use Inertia\Inertia;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('posts/Index', [
            'posts' => Post::latest()->paginate(10),
        ]);
    }
}

Svelte-paginacomponent

In Svelte 5 ontvang je props met de rune $props().

<!-- resources/js/pages/posts/Index.svelte -->
<script lang="ts">
    import { Link } from '@inertiajs/svelte'

    type Post = {
        id: number
        title: string
        created_at: string
    }

    type Props = {
        posts: {
            data: Post[]
        }
    }

    let { posts }: Props = $props()
</script>

<div>
    <h1>Postoverzicht</h1>
    {#each posts.data as post (post.id)}
        <article>
            <h2>
                <Link href={`/posts/${post.id}`}>{post.title}</Link>
            </h2>
            <p>{post.created_at}</p>
        </article>
    {/each}
</div>

Je ontvangt de props simpelweg met $props() en kunt de data uit de controller direct in de template gebruiken. Een REST API definiëren is niet nodig.

De `Link`-component

Met de <Link>-component van @inertiajs/svelte verlopen paginanavigaties via XHR, zodat een volledige browserreload wordt vermeden.

<script lang="ts">
    import { Link } from '@inertiajs/svelte'
</script>

<!-- Basislink -->
<Link href="/posts">Postoverzicht</Link>

<!-- Link met de POST-methode (bijv. verwijderen) -->
<Link href="/posts/1" method="delete" as="button">
    Verwijderen
</Link>

<!-- Preload (vooraf ophalen bij hover) -->
<Link href="/posts/1" preload>Post bekijken</Link>

Je schrijft hem net als een gewone <a>-tag, maar op de achtergrond vervangt Inertia alleen de paginacomponent, waardoor het aanvoelt als een SPA.

De `Form`-component

De <Form>-component van @inertiajs/svelte is de aanbevolen stijl voor formulierverzending die in de authenticatieschermen van de starter kits wordt gebruikt. Je geeft action en method op als props en schrijft de inhoud met {#snippet}.

Basisgebruik

<script lang="ts">
    import { Form } from '@inertiajs/svelte'
</script>

<Form action="/posts" method="post" class="flex flex-col gap-4">
    {#snippet children({ errors, processing })}
        <div>
            <label for="title">Titel</label>
            <input id="title" name="title" type="text" required />
            {#if errors.title}
                <p class="error">{errors.title}</p>
            {/if}
        </div>

        <div>
            <label for="content">Inhoud</label>
            <textarea id="content" name="content"></textarea>
            {#if errors.content}
                <p class="error">{errors.content}</p>
            {/if}
        </div>

        <button type="submit" disabled={processing}>
            {processing ? 'Versturen...' : 'Posten'}
        </button>
    {/snippet}
</Form>

{#snippet children({ errors, processing })} is de snippet-syntaxis van Svelte: een contentblok dat je aan een component doorgeeft (vergelijkbaar met slots in Vue of render props in React). De Form-component berekent errors en processing automatisch en geeft ze door. Voor de formuliervelden gebruik je geen bind:value maar het native HTML-attribuut name, zodat de standaard formulierdataverzameling van de browser werkt.

Het patroon van de starter kits

De starter kits gebruiken Wayfinder om routes als objecten te beheren. store.form() geeft een object terug met de action en method van het routeobject, dat je in <Form> spreadt.

<script lang="ts">
    import { Form } from '@inertiajs/svelte'
    import { store } from '@/routes/login'
</script>

<Form
    {...store.form()}
    resetOnSuccess={['password']}
    class="flex flex-col gap-6"
>
    {#snippet children({ errors, processing })}
        <!-- Inhoud van het formulier -->
    {/snippet}
</Form>

Velden die je opgeeft in resetOnSuccess worden bij een geslaagde verzending automatisch gereset. Gebruik dit voor velden die je na het verzenden leeg wilt maken, zoals wachtwoordvelden.

Gebruik je Wayfinder niet, dan werkt het net zo goed als je direct een URL doorgeeft, zoals action="/login".

De `useForm`-hook

Voor formulierverwerking gebruik je de useForm-hook van @inertiajs/svelte. Statebeheer van het formulier, verzenden en het tonen van validatiefouten implementeer je hiermee eenvoudig.

Aan de controllerkant

// app/Http/Controllers/PostController.php
class PostController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate([
            'title'   => ['required', 'string', 'max:255'],
            'content' => ['required', 'string'],
        ]);

        Post::create($validated + ['user_id' => auth()->id()]);

        return redirect()->route('posts.index')
            ->with('success', 'Post aangemaakt.');
    }
}

Svelte-formuliercomponent

<!-- resources/js/pages/posts/Create.svelte -->
<script lang="ts">
    import { useForm } from '@inertiajs/svelte'

    const form = useForm({
        title: '',
        content: '',
    })

    function submit(e: SubmitEvent) {
        e.preventDefault()
        form.post('/posts')
    }
</script>

<form onsubmit={submit}>
    <div>
        <label>Titel</label>
        <input type="text" bind:value={form.data.title} />
        {#if form.errors.title}
            <p class="error">{form.errors.title}</p>
        {/if}
    </div>

    <div>
        <label>Inhoud</label>
        <textarea bind:value={form.data.content}></textarea>
        {#if form.errors.content}
            <p class="error">{form.errors.content}</p>
        {/if}
    </div>

    <button type="submit" disabled={form.processing}>
        {form.processing ? 'Versturen...' : 'Posten'}
    </button>
</form>

De belangrijkste properties van het object dat useForm teruggeeft:

Property / methode	Beschrijving
`form.data`	Het dataobject van het formulier
`form.errors`	Validatiefouten (toegankelijk per veldnaam)
`form.processing`	`true` tijdens het verzenden (gebruik dit om de knop uit te schakelen)
`form.isDirty`	`true` als er iets is gewijzigd ten opzichte van de beginwaarden
`form.post(url)`	Verzenden met een POST-request
`form.put(url)`	Verzenden met een PUT-request (bijwerken)
`form.delete(url)`	Verzenden met een DELETE-request
`form.reset()`	Zet het formulier terug naar de beginwaarden

Komt er een validatiefout terug, dan toont useForm de fouten terwijl de ingevoerde inhoud behouden blijft. In combinatie met bind:value krijg je een naadloze formulierervaring.

Gedeelde data (shared data)

Data die je op elke pagina nodig hebt (zoals de ingelogde gebruiker en flashberichten) definieer je in de methode share() van de middleware HandleInertiaRequests.

// app/Http/Middleware/HandleInertiaRequests.php
use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user()
                    ? $request->user()->only('id', 'name', 'email')
                    : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error'   => $request->session()->get('error'),
            ],
        ]);
    }
}

Om vanuit een Svelte-component bij de gedeelde data te komen, gebruik je usePage().

<script lang="ts">
    import { usePage } from '@inertiajs/svelte'

    type SharedProps = {
        auth: {
            user: { id: number; name: string; email: string } | null
        }
        flash: {
            success: string | null
            error: string | null
        }
    }

    const page = usePage<SharedProps>()
</script>

<header>
    {#if page.props.auth.user}
        <span>{page.props.auth.user.name}</span>
    {:else}
        <span>Gast</span>
    {/if}
</header>

{#if page.props.flash.success}
    <div class="alert-success">{page.props.flash.success}</div>
{/if}

Gedeelde data wordt bij elke request meegestuurd; beperk deze daarom tot het strikt noodzakelijke. Gebruik je lazy evaluation met fn(), dan wordt de data alleen geëvalueerd wanneer er daadwerkelijk toegang toe is.

De reactiviteit van Svelte 5 (runes)

Hier zijn de runes van Svelte 5 die je moet kennen om met Inertia × Svelte te ontwikkelen.

`$state` — reactieve state

<script lang="ts">
    let count = $state(0)
    let isOpen = $state(false)
    let items = $state<string[]>([])
</script>

<p>{count}</p>
<button onclick={() => count++}>+1</button>
<button onclick={() => isOpen = !isOpen}>Toggle</button>

Variabelen die je declareert met $state worden automatisch reactief. Verandert de waarde, dan wordt de DOM automatisch bijgewerkt. Dit komt overeen met ref in Vue of useState in React, maar zonder dat je een .value-property nodig hebt: een gewone toewijzing werkt de state al bij.

`$derived` — afgeleide waarden

<script lang="ts">
    let posts = $state<{ title: string; published: boolean }[]>([])

    // Alleen de posts filteren waarvan published true is
    let publishedPosts = $derived(posts.filter(post => post.published))

    // Bij meerdere afhankelijkheden
    let summary = $derived.by(() => {
        const total = posts.length
        const published = publishedPosts.length
        return `${published} van de ${total} gepubliceerd`
    })
</script>

<p>{summary}</p>

$derived wordt automatisch opnieuw berekend wanneer de waarden waarvan het afhangt veranderen. Dit komt overeen met computed in Vue of useMemo in React.

`$effect` — side effects verwerken

<script lang="ts">
    let query = $state('')

    // Wordt uitgevoerd telkens wanneer query verandert
    $effect(() => {
        console.log('De zoekquery is veranderd:', query)

        // Je kunt een cleanup-functie teruggeven
        return () => {
            console.log('Cleanup')
        }
    })
</script>

<input bind:value={query} placeholder="Zoeken..." />

$effect wordt uitgevoerd telkens wanneer een $state-waarde waarvan het afhangt verandert. Het komt overeen met useEffect in React, maar je hoeft geen dependency-array op te geven: de gebruikte $state-variabelen worden automatisch gevolgd.

shadcn-svelte-componenten

De starter kit bevat shadcn-svelte. shadcn-svelte is een componentlibrary met dezelfde ontwerpfilosofie als shadcn/ui voor React: de code wordt naar je project gekopieerd en je kunt hem vrij aanpassen.

Componenten toevoegen

npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add input
npx shadcn-svelte@latest add card

Na het uitvoeren van het commando wordt de broncode van de component geplaatst in resources/js/components/ui/.

Gebruik

<script lang="ts">
    import { Button } from '@/components/ui/button'
    import { Input } from '@/components/ui/input'
    import * as Card from '@/components/ui/card'
    import { useForm } from '@inertiajs/svelte'

    const form = useForm({ email: '', password: '' })

    function submit(e: SubmitEvent) {
        e.preventDefault()
        form.post('/login')
    }
</script>

<Card.Root class="w-96">
    <Card.Header>
        <Card.Title>Inloggen</Card.Title>
    </Card.Header>
    <Card.Content>
        <form onsubmit={submit} class="space-y-4">
            <Input
                type="email"
                bind:value={form.data.email}
                placeholder="E-mailadres"
            />
            {#if form.errors.email}
                <p class="text-sm text-red-500">{form.errors.email}</p>
            {/if}

            <Input
                type="password"
                bind:value={form.data.password}
                placeholder="Wachtwoord"
            />

            <Button type="submit" disabled={form.processing} class="w-full">
                {form.processing ? 'Inloggen...' : 'Inloggen'}
            </Button>
        </form>
    </Card.Content>
</Card.Root>

De starter kit bevat vooraf veelgebruikte componenten zoals Button, Input, Card, Dialog en Dropdown. Extra componenten voeg je op elk moment toe met het commando npx shadcn-svelte@latest add.

Samenvatting

Svelte komt in combinatie met Laravel vooral tot zijn recht in de “moderne monoliet”-opzet via Inertia. Dankzij het compilergebaseerde ontwerp is de bundel klein, en dankzij de runes-syntaxis is de reactiviteit expliciet en makkelijk te begrijpen.

Element	Rol
Laravel-controller	Routing, data ophalen, validatie
`Inertia::render()`	Geeft data door van de controller aan de Svelte-component
Svelte-paginacomponent	Ontvangt props via `$props()` en rendert de UI
`useForm`	Statebeheer, verzenden en fouten tonen bij formulieren
`Link`-component	Paginanavigatie zonder volledige reload
`usePage().props`	Toegang tot gedeelde data
shadcn-svelte	Standaard componentlibrary

Met Inertia × Svelte krijg je een ontwikkelervaring die de eenvoud van een Laravel-backend combineert met de compacte schrijfstijl van Svelte. Maak je een project aan met de starter kit, dan kun je direct beginnen met ontwikkelen, inclusief authenticatieschermen.

Officiële Inertia.js-documentatie

Raadpleeg de officiële documentatie voor alle functies van Inertia v3.

​Wat is Svelte

​De runes van Svelte 5

​De positie binnen Laravel

​Geschiedenis

​De huidige mainstream: Inertia × Svelte

​Setup

​Via een starter kit (aanbevolen)

​Handmatige installatie

​Directorystructuur

​De basisstructuur van een Svelte-bestand

​Templatesyntaxis

​Variabelen en expressies invoegen

​{#if} — voorwaarden

​{#each} — lijsten renderen

​bind: — two-way binding

​De basis van paginacomponenten

​Controller

​Svelte-paginacomponent

​De Link-component

​De Form-component

​Basisgebruik

​Het patroon van de starter kits

​De useForm-hook

​Aan de controllerkant

​Svelte-formuliercomponent

​Gedeelde data (shared data)

​De reactiviteit van Svelte 5 (runes)

​$state — reactieve state

​$derived — afgeleide waarden

​$effect — side effects verwerken

​shadcn-svelte-componenten

​Componenten toevoegen

​Gebruik

​Samenvatting

Officiële Inertia.js-documentatie

Wat is Svelte

De runes van Svelte 5

De positie binnen Laravel

Geschiedenis

De huidige mainstream: Inertia × Svelte

Setup

Via een starter kit (aanbevolen)

Handmatige installatie

Directorystructuur

De basisstructuur van een Svelte-bestand

Templatesyntaxis

Variabelen en expressies invoegen

`{#if}` — voorwaarden

`{#each}` — lijsten renderen

`bind:` — two-way binding

De basis van paginacomponenten

Controller

Svelte-paginacomponent

De `Link`-component

De `Form`-component

Basisgebruik

Het patroon van de starter kits

De `useForm`-hook

Aan de controllerkant

Svelte-formuliercomponent

Gedeelde data (shared data)

De reactiviteit van Svelte 5 (runes)

`$state` — reactieve state

`$derived` — afgeleide waarden

`$effect` — side effects verwerken

shadcn-svelte-componenten

Componenten toevoegen

Gebruik

Samenvatting