> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend
> Een introductiegids om te bepalen hoe je Blade, Livewire, Inertia, React, Vue, Svelte, SPA's en Vite combineert in Laravel 13.
## Overzicht
Laravel is een backend-framework, maar hecht ook veel waarde aan de ontwikkelervaring aan de frontend-kant.\
In Laravel 13 kun je zowel PHP-centrisch werken als JavaScript-frameworks zoals React, Vue en Svelte inzetten.
Welke aanpak je kiest, wordt overzichtelijker als je naar deze drie punten kijkt:
* Wil je de UI vooral in **PHP** schrijven?
* Wil je de UI vooral in **JavaScript / TypeScript** schrijven?
* Wil je alles in één repository houden, of de API en SPA scheiden?
```mermaid theme={null}
flowchart TD
A["Laravel-applicatie"] --> B{"Waar bouw je de UI?"}
A --> G["Assets bouwen met Vite"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + onafhankelijke SPA"]
C --> C1["Server retourneert HTML"]
D --> D1["Dynamische UI's bouwen met PHP aan het stuur"]
E --> E1["SPA-achtige ervaring in één repository"]
F --> F1["Integreren met een aparte frontend of mobiele app"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Verder met PHP
### Blade
[Blade](/nl/blade) is de standaard template-engine van Laravel. Je retourneert views vanuit controllers of routes, en de server stuurt de gegenereerde HTML naar de browser.
**Voordelen**
* Integreert naadloos met de routing, validatie en authenticatie van Laravel
* Je kunt bijna alles in PHP afhandelen, dus de leercurve is laag
* Past goed bij pagina's waar SEO en de initiële weergave belangrijk zijn
**Nadelen**
* Bij elke paginanavigatie of formulierverzending wordt de pagina al snel volledig opnieuw gerenderd
* Voor complexe interacties heb je aanvullende JavaScript nodig
Blade is geschikt voor beheerpanelen, interne tools, contentgerichte schermen en applicaties die vooral rond formulieren draaien.
### Livewire
[Laravel Livewire](https://livewire.laravel.com) is een aanpak waarmee je, voortbouwend op Blade, dynamischere UI's PHP-centrisch implementeert. Interacties zoals modals, zoeken en inline bewerken bouw je met een ervaring die dicht bij React of Vue ligt.
**Voordelen**
* Je bouwt dynamische UI's in het verlengde van PHP en Blade
* Sluit goed aan op het state-management en de validatie van Laravel
* Wil je alleen op specifieke plekken JavaScript toevoegen, dan combineert het makkelijk met Alpine.js
**Nadelen**
* Complex client-side state-management gaat minder goed dan met JavaScript-frameworks
* Soms minder geschikt voor grootschalige SPA's waar de frontend een grote verantwoordelijkheid draagt
Wil je meer weten over Livewire, lees dan de [introductie tot Livewire](/nl/blog/livewire-introduction).
### PHP-first starter kits
De [starter kits](/nl/starter-kits) van Laravel 13 bevatten een op **Livewire** gebaseerde optie voor teams die PHP-centrisch tot en met **dynamische UI's** willen bouwen. Beginnen met alleen Blade kan natuurlijk ook, maar de PHP-first optie die als starter kit wordt aangeboden is Livewire. Authenticatie, layouts en de Vite-configuratie worden in één keer klaargezet, zodat je zo snel mogelijk kunt starten met ontwikkelen.
## JavaScript-frameworks gebruiken
### Inertia + React / Vue / Svelte
[Inertia](https://inertiajs.com) is de brug waarmee je paginacomponenten bouwt in React, Vue of Svelte, terwijl je de routes, controllers en authenticatie van Laravel blijft gebruiken. Je hoeft de API-server en SPA niet volledig te scheiden en bouwt een moderne UI binnen één Laravel-applicatie.
**Voordelen**
* Je kunt het componentenmodel van React / Vue / Svelte gebruiken
* Routing en authenticatie kun je bij Laravel laten
* Backend en frontend zijn makkelijk in één repository te beheren
**Nadelen**
* Er is meer te leren dan bij een opzet met alleen Blade
* Kennis van de Node.js-toolchain en TypeScript is al snel nodig
In de officiële starter kits van Laravel 13 kun je **React / Vue / Svelte + Inertia** vanaf het begin kiezen.
Zie voor meer informatie de [introductie tot Inertia](/nl/blog/inertia-introduction), [introductie tot React](/nl/blog/react-introduction), [introductie tot Vue](/nl/blog/vue-introduction) en [introductie tot Svelte](/nl/blog/svelte-introduction).
### API en een onafhankelijke SPA scheiden
Je kunt er ook voor kiezen de frontend volledig van Laravel te scheiden en de API te gebruiken vanuit een aparte SPA of mobiele app. Dit past goed wanneer je dezelfde backend wilt delen met meerdere clients.
In dat geval vervult Laravel vooral deze rollen:
* API-routes aanbieden
* Authenticatie en autorisatie (bijvoorbeeld [Sanctum](/nl/sanctum))
* JSON-responses vormgeven (bijvoorbeeld [Eloquent API Resources](/nl/eloquent-resources))
**Voordelen**
* Makkelijk uit te rollen naar meerdere clients zoals web, mobiel en desktop
* De technologiekeuze voor de frontend staat los van Laravel zelf
**Nadelen**
* Authenticatie, dataophaling en deployment moet je apart ontwerpen
* Al snel complexer dan een opzet die volledig binnen één Laravel-app blijft
### JavaScript-first starter kits
Met de [starter kits](/nl/starter-kits) begin je met Inertia, React / Vue / Svelte, Tailwind CSS en Vite al ingebouwd. Ook de authenticatieschermen staan vanaf het begin klaar, zodat je je kunt concentreren op UI-ontwikkeling.
## Assets bundelen met Vite
Welke aanpak je ook kiest, in Laravel 13 bouw je CSS en JavaScript doorgaans met [Vite](/nl/vite). Bij Blade en Livewire bundel je lichte scripts en styles met Vite, bij Inertia de volledige frontend-code van je applicatie.
De voordelen van Vite zijn:
* Snelle HMR tijdens lokale ontwikkeling
* Bundeling en versionering van productie-assets
* Integratie met de `@vite()`-directive van Laravel
In de starter kits van Laravel 13 is een op Vite gebaseerde frontend-configuratie al vooraf ingesteld.
## Vergelijking van aanpakken
| Aanpak | Geschikt voor | Voordelen | Nadelen |
| ------------------------------ | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| Blade | Contentgerichte pagina's, beheerpanelen rond formulieren | Eenvoudig en makkelijk te leren. Integreert naadloos met de standaardfeatures van Laravel | Bij geavanceerde UI's neemt het volledig herrenderen van pagina's snel toe |
| Livewire | Zakelijke apps met dynamische UI's, PHP-centrisch | Responsieve UI's bouwen zonder PHP te verlaten | Complex client-side state-management is een zwakker punt |
| Inertia + React / Vue / Svelte | Apps die een moderne UI willen combineren met een geïntegreerde Laravel-werkwijze | SPA-achtige ervaring bouwen in één repository | Vaardigheid in JavaScript / TypeScript vereist |
| API + onafhankelijke SPA | Producten met meerdere clients of mobiele integratie als uitgangspunt | Frontend onafhankelijk uit te rollen | Authenticatie, deployment en beheer worden al snel complex |
## Volgende stappen
Bekijk de basis van server-side rendering.
Vergelijk de startconfiguraties voor React, Vue, Svelte en Livewire.
Leer de flow van de ontwikkelserver, HMR en productiebuilds.
Bekijk hoe je met Inertia Laravel en JavaScript-frameworks verbindt.
## Related topics
- [Een Laravel starter kit maken](/nl/advanced/starter-kit-creation.md)
- [Kennis die je nodig hebt voordat je met Laravel begint](/nl/true-tutorial.md)
- [Een SPA bouwen met Inertia.js](/nl/blog/inertia-introduction.md)
- [Assets bundelen met Vite](/nl/vite.md)
- [Laravel-updates van juli 2026](/nl/blog/changelog/202607.md)