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

# Introductie van Laravel Wayfinder

> We bespreken Laravel Wayfinder, het pakket dat Ziggy heeft vervangen in de Inertia starter kits. Van het mechanisme dat je Laravel-backend en TypeScript-frontend typeveilig verbindt, tot de verschillen met Ziggy, installatie, basisgebruik en de next-generation features die zich in de next-branch ontwikkelen.

## Wat is Wayfinder?

**Laravel Wayfinder** is een pakket dat je Laravel-backend en TypeScript-frontend zonder frictie met elkaar verbindt. Het genereert automatisch volledig getypeerde TypeScript-functies op basis van je controllers en routes, zodat je Laravel-endpoints direct als functies kunt aanroepen vanuit je frontend-code.

Hardcoded URL's, handmatig beheer van routeparameters en het handmatig synchroniseren van backend-wijzigingen — dat is allemaal niet meer nodig.

<Info>
  Wayfinder is een bètaversie (momenteel v0.1.x). De API kan nog wijzigen tot de release van v1.0.0. Alle belangrijke wijzigingen worden vastgelegd in de [CHANGELOG](https://github.com/laravel/wayfinder/blob/main/CHANGELOG.md).
</Info>

***

## Verschillen tussen Ziggy en Wayfinder

### Wat is Ziggy?

[Ziggy](https://github.com/tighten/ziggy) is een routehelper die jarenlang breed werd gebruikt in het Laravel-ecosysteem. Het stelt de routedefinities van Laravel beschikbaar aan JavaScript, zodat je URL's kon genereren in de vorm van `route('posts.show', { id: 1 })`.

### Waarom is het vervangen door Wayfinder?

Omdat Ziggy routenamen en parameters als strings behandelt, had het beperkingen in de samenwerking met TypeScript. Typefouten in routenamen of verkeerde parameternamen leiden pas tot runtime-errors.

Wayfinder is TypeScript-first ontworpen en genereert controllermethodes als **importeerbare functies**.

| Vergelijkingspunt | Ziggy                            | Wayfinder                              |
| ----------------- | -------------------------------- | -------------------------------------- |
| Routes refereren  | `route('posts.show', { id: 1 })` | `import { show } from "@/actions/..."` |
| Typeveiligheid    | Beperkte typedefinities          | Volledige TypeScript-types             |
| IDE-ondersteuning | Zwakke autocomplete              | Volledige autocomplete en typechecks   |
| Tree shaking      | Alle routes in de bundel         | Alleen gebruikte routes in de bundel   |
| Generatiemoment   | Bij runtime geïnjecteerd         | Statisch gegenereerd bij de build      |

In de op Inertia gebaseerde Laravel starter kits (React, Vue, Svelte) is Wayfinder de standaard.

***

## Installatie

### 1. Installeer het server-side pakket met Composer

```bash theme={null}
composer require laravel/wayfinder
```

### 2. Installeer de Vite-plugin met NPM

```bash theme={null}
npm i -D @laravel/vite-plugin-wayfinder
```

### 3. Voeg de plugin toe aan `vite.config.js`

```ts theme={null}
import { wayfinder } from "@laravel/vite-plugin-wayfinder";
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/js/app.ts"],
            refresh: true,
        }),
        wayfinder(),
    ],
});
```

Met de Vite-plugin worden de TypeScript-bestanden automatisch opnieuw gegenereerd zodra PHP-bestanden of routebestanden wijzigen terwijl de ontwikkelserver draait.

***

## TypeScript-definitiebestanden genereren

Genereer de TypeScript-bestanden met het commando `wayfinder:generate`.

```bash theme={null}
php artisan wayfinder:generate
```

Standaard worden er drie mappen gegenereerd onder `resources/js`.

```
resources/js/
├── actions/         # Functies voor controlleracties
│   └── App/Http/Controllers/
│       └── PostController.ts
├── routes/          # Functies voor named routes
│   └── post.ts
└── wayfinder/       # Typedefinitiebestanden
    └── types.ts
```

<Tip>
  Omdat de gegenereerde bestanden bij elke build volledig opnieuw worden aangemaakt, raden we aan ze toe te voegen aan `.gitignore`. Sluit de drie mappen `wayfinder`, `actions` en `routes` samen uit.
</Tip>

Wil je de uitvoerlocatie wijzigen, gebruik dan de optie `--path`.

```bash theme={null}
php artisan wayfinder:generate --path=resources/js/api
```

Je kunt ook alleen controlleracties of alleen routes genereren.

```bash theme={null}
php artisan wayfinder:generate --skip-actions  # Alleen routes genereren
php artisan wayfinder:generate --skip-routes   # Alleen acties genereren
```

***

## Basisgebruik

### Acties importeren en gebruiken

Een voorbeeld dat de URL genereert voor de `show`-methode van `PostController`.

```ts theme={null}
import { show } from "@/actions/App/Http/Controllers/PostController";

show(1);
// { url: "/posts/1", method: "get" }
```

Heb je alleen de URL nodig, gebruik dan `.url()`.

```ts theme={null}
show.url(1); // "/posts/1"
```

Je kunt ook een specifieke HTTP-methode opgeven.

```ts theme={null}
show.head(1); // { url: "/posts/1", method: "head" }
```

### Parameters doorgeven

De functies van Wayfinder accepteren parameters in verschillende vormen.

```ts theme={null}
import { update } from "@/actions/App/Http/Controllers/PostController";

// Enkele parameter
show(1);
show({ id: 1 });

// Meerdere parameters
update([1, 2]);
update({ post: 1, author: 2 });
update({ post: { id: 1 }, author: { id: 2 } });
```

Als er een keybinding op de route is opgegeven (`/posts/{post:slug}`), kun je die waarde gebruiken.

```ts theme={null}
// Als de route /posts/{post:slug} is
show("my-new-post");
show({ slug: "my-new-post" });
```

### Een hele controller importeren

Je kunt ook een hele controller importeren en de methodes daarop aanroepen.

```ts theme={null}
import PostController from "@/actions/App/Http/Controllers/PostController";

PostController.show(1);
PostController.index();
```

<Warning>
  Als je een hele controller importeert, werkt tree shaking niet en komen alle acties in je bundel terecht. Door acties afzonderlijk te importeren houd je de uiteindelijke bundel kleiner.
</Warning>

### Single action controllers

Een single action controller (invokable controller) roep je aan als de geïmporteerde functie zelf.

```ts theme={null}
import StorePostController from "@/actions/App/Http/Controllers/StorePostController";

StorePostController(); // { url: "/posts", method: "post" }
```

### Named routes importeren

Om routes via hun naam te benaderen gebruik je de bestanden onder `routes/`.

```ts theme={null}
import { show } from "@/routes/post";

// Als de routenaam `post.show` is
show(1); // { url: "/posts/1", method: "get" }
```

### Queryparameters

Aan alle Wayfinder-functies kun je queryparameters toevoegen met de optie `query`.

```ts theme={null}
import { show } from "@/actions/App/Http/Controllers/PostController";

show(1, { query: { page: 1, sort_by: "name" } });
// { url: "/posts/1?page=1&sort_by=name", method: "get" }
```

Om te mergen met de queryparameters van de huidige URL gebruik je `mergeQuery`.

```ts theme={null}
// Huidige URL: /posts/1?page=1&sort_by=category&q=shirt

show.url(1, { mergeQuery: { page: 2, sort_by: "name" } });
// "/posts/1?page=2&sort_by=name&q=shirt"

// Geef null op om een parameter te verwijderen
show.url(1, { mergeQuery: { sort_by: null } });
// "/posts/1?page=1&q=shirt"
```

### Formuliervarianten

Voor gebruik in traditionele HTML-formulieren genereer je met de optie `--with-form` en gebruik je de `.form`-variant.

```bash theme={null}
php artisan wayfinder:generate --with-form
```

```tsx theme={null}
import { store, update } from "@/actions/App/Http/Controllers/PostController";

// React-voorbeeld
const Page = () => (
    <form {...store.form()}>
        {/* <form action="/posts" method="post"> */}
    </form>
);

const EditPage = () => (
    <form {...update.form(1)}>
        {/* <form action="/posts/1?_method=PATCH" method="post"> */}
    </form>
);
```

***

## Inertia en Wayfinder combineren

Als je de formulierhelper van Inertia combineert met Wayfinder, kun je formulieren versturen zonder ook maar één URL-string te schrijven.

```ts theme={null}
import { useForm } from "@inertiajs/react";
import { store } from "@/actions/App/Http/Controllers/PostController";

const form = useForm({ name: "My Post" });

form.submit(store()); // Verstuurt naar POST /posts
```

Ook met de `Link`-component werkt het op dezelfde manier.

```tsx theme={null}
import { Link } from "@inertiajs/react";
import { show } from "@/actions/App/Http/Controllers/PostController";

const Nav = () => (
    <Link href={show(1)}>Bekijk post</Link>
);
```

***

## Gebruik in de starter kits

Als je met `laravel new` een nieuw project aanmaakt en React, Vue of Svelte kiest, krijg je een configuratie waarin Wayfinder automatisch is ingesteld. De starter kits bevatten het volgende.

* Composer-pakket `laravel/wayfinder`
* NPM-pakket `@laravel/vite-plugin-wayfinder`
* Plugin geconfigureerd in `vite.config.js`
* Gegenereerde mappen toegevoegd aan `.gitignore`

Handmatige installatie in een bestaand project doe je met de stappen hierboven.

***

## Omgaan met methodenamen die botsen met gereserveerde woorden

Controllermethodes met dezelfde naam als een gereserveerd JavaScript-woord, zoals `delete` of `import`, krijgen het achtervoegsel `Method`.

```ts theme={null}
// Als de controller een delete-methode heeft
import { deleteMethod } from "@/actions/App/Http/Controllers/PostController";

deleteMethod(1); // { url: "/posts/1", method: "delete" }
```

***

## Huidige status (v0.1.x)

De huidige stabiele versie wordt geleverd via de `v0.1.x`-branch. De nieuwste versie per maart 2026 is **v0.1.15**.

### Belangrijkste wijzigingen in de v0.1.x-reeks

| Versie  | Belangrijkste inhoud                                             |
| ------- | ---------------------------------------------------------------- |
| v0.1.15 | Ondersteuning voor Laravel 13, fix voor crash bij Blade-views    |
| v0.1.13 | Verbeterde TypeScript strict-compatibiliteit van queryparameters |
| v0.1.7  | Ondersteuning voor frontend-opgave van standaard-URL-parameters  |
| v0.1.6  | Toevoeging van de Vite-plugin                                    |
| v0.1.5  | PHP 8.2-ondersteuning, ondersteuning voor gecachte routes        |
| v0.1.0  | Eerste release                                                   |

***

## Next-generation features in ontwikkeling in de next-branch

In de `next`-branch wordt gewerkt aan een volgende versie met sterk uitgebreide functionaliteit ten opzichte van de huidige v0.1.x.

<Warning>
  De `next`-branch kun je installeren met de constraint `dev-next`, maar de API kan nog flink veranderen. Gebruik in productie wordt niet aanbevolen.
</Warning>

```bash theme={null}
composer require laravel/wayfinder:dev-next
```

### Het bereik van de gegenereerde TypeScript wordt flink uitgebreid

Waar v0.1.x zich beperkt tot routes en controlleracties, genereert de volgende versie dit alles als TypeScript.

```mermaid theme={null}
graph TD
    A["Laravel-applicatie"] --> B["wayfinder:generate"]
    B --> C["Routes & Actions<br>route-URL-functies"]
    B --> D["Form Requests<br>validatietypes"]
    B --> E["Eloquent Models<br>model-interfaces"]
    B --> F["PHP Enums<br>TypeScript-constanten"]
    B --> G["Inertia Page Props<br>page prop-types"]
    B --> H["Broadcast Channels<br>channel-types"]
    B --> I["Broadcast Events<br>event payload-types"]
    B --> J["Environment Variables<br>import.meta.env-types"]
```

### TypeScript-types genereren voor Form Requests

```php theme={null}
class StorePostRequest extends FormRequest
{
    public function rules(): array
    {
        return [
            'title'   => ['required', 'string', 'max:255'],
            'content' => ['required', 'string'],
            'tags'    => ['nullable', 'array'],
            'tags.*'  => ['string'],
        ];
    }
}
```

Uit bovenstaande Form Request wordt het volgende type gegenereerd.

```ts theme={null}
export type Request = {
    title: string;
    content: string;
    tags?: string[] | null;
};
```

### Types genereren voor Eloquent-modellen

```php theme={null}
class User extends Model
{
    protected $casts = [
        'email_verified_at' => 'datetime',
        'is_admin' => 'boolean',
    ];

    public function posts(): HasMany
    {
        return $this->hasMany(Post::class);
    }
}
```

Uit bovenstaand model worden types gegenereerd in `types.d.ts`.

```ts theme={null}
export namespace App.Models {
    export type User = {
        id: number;
        name: string;
        email: string;
        email_verified_at: string | null;
        is_admin: boolean;
        posts: App.Models.Post[];
    };
}
```

### PHP-enums omzetten naar TypeScript

```php theme={null}
enum PostStatus: string
{
    case Draft = 'draft';
    case Published = 'published';
    case Archived = 'archived';
}
```

Er worden zowel types als constanten gegenereerd.

```ts theme={null}
// Typedefinities (types.d.ts)
export namespace App.Enums {
    export type PostStatus = "draft" | "published" | "archived";
}

// Constanten (App/Enums/PostStatus.ts)
export const Draft = "draft";
export const Published = "published";
export const Archived = "archived";

export const PostStatus = { Draft, Published, Archived } as const;
```

### Gewijzigde uitvoermappen

In v0.1.x waren er drie aparte mappen — `actions/`, `routes/` en `wayfinder/` — maar in de volgende versie wordt alles samengebracht onder `resources/js/wayfinder`.

```
resources/js/wayfinder/
├── App/Http/Controllers/
│   └── PostController.ts    # Actiefuncties (actions/ vervalt)
├── routes/
│   └── post.ts              # Named routes (ongewijzigd)
├── broadcast-channels.ts    # Broadcast channels
├── broadcast-events.ts      # Broadcast events
└── types.d.ts               # Alle typedefinities (voorheen types.ts)
```

### Belangrijkste wijzigingen van v0.1.x naar next

* Het importpad verandert van `@/actions/...` naar `@/wayfinder/...`
* De flags `--skip-actions`, `--skip-routes` en `--with-form` vervallen en verhuizen naar een configuratiebestand
* `types.ts` wordt `types.d.ts`

***

## Samenvatting

Laravel Wayfinder is een pakket dat de functionaliteit die Ziggy bood — Laravel-routes refereren vanuit JavaScript — TypeScript-first opnieuw heeft ontworpen. Door de aanpak van gegenereerde functies die je importeert, is er een grote verbetering op het gebied van typeveiligheid, IDE-ondersteuning en tree shaking.

Ook in de huidige v0.1.x kun je routes en controlleracties al typeveilig refereren, en het is standaard opgenomen in de op Inertia gebaseerde Laravel starter kits. De volgende versie, in ontwikkeling in de `next`-branch, groeit uit tot een nog completer typeveilig fundament dat ook Form Requests, Eloquent-modellen, enums en Inertia page props als TypeScript genereert.

<Card title="Laravel Wayfinder GitHub" icon="github" href="https://github.com/laravel/wayfinder">
  De broncode, CHANGELOG en issues vind je hier.
</Card>

<Card title="Vite Plugin Wayfinder" icon="bolt" href="https://github.com/laravel/vite-plugin-wayfinder">
  Details over de configuratieopties van de Vite-plugin vind je hier.
</Card>


## Related topics

- [Introductie React — de basis voor Inertia × Laravel](/nl/blog/react-introduction.md)
- [Introductie Svelte — de basis voor Inertia × Laravel](/nl/blog/svelte-introduction.md)
- [Introductie Vue.js — de basis voor Inertia × Laravel](/nl/blog/vue-introduction.md)
- [Introductie testen](/nl/testing.md)
- [Introductie tot authenticatie](/nl/authentication.md)