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

# Assets bundelen met Vite

> Leer hoe je in een Laravel-project JavaScript en CSS bundelt met Vite en met hot reload een prettige ontwikkelomgeving opzet.

## Wat zijn Laravel en Vite?

[Vite](https://vitejs.dev) is een snelle frontend-buildtool. Tijdens het ontwikkelen biedt Vite hot module replacement (HMR), waarmee bestandswijzigingen direct worden doorgevoerd, en voor productiebuilds genereert het geoptimaliseerde assets.

Sinds Laravel 9 is Vite de standaard frontend-buildtool en werkt het samen met Laravel via `laravel-vite-plugin`. Deze plugin vervult de volgende hoofdrollen:

* Beheer van entry points
* HMR-ondersteuning van de ontwikkelserver
* Integratie met de `@vite()` Blade-directive
* Versionering van assets bij productiebuilds (cache busting)

<Info>
  Gebruik je een Laravel starter kit (zoals Laravel Breeze), dan is de configuratie voor Vite en Tailwind al inbegrepen. Deze pagina legt uit hoe je alles vanaf nul instelt.
</Info>

<Tip>
  Wil je eerst weten welke plek Vite inneemt binnen de totale frontend-opzet van Laravel, bekijk dan eerst het overzicht op [Frontend](/nl/frontend).
</Tip>

## Installatie en configuratie

### Controleren of Node is geïnstalleerd

Voor Vite heb je Node.js (16 of hoger) en npm nodig. Controleer of ze geïnstalleerd zijn.

```shell theme={null}
node -v
npm -v
```

### Packages installeren

In een nieuw geïnstalleerd Laravel-project staan `vite` en `laravel-vite-plugin` al in `package.json`. Installeer de dependencies met dit commando:

```shell theme={null}
npm install
```

### vite.config.js configureren

In de projectroot is een `vite.config.js` gegenereerd. Hier geef je de entry points op (de bestanden waar de bundel begint).

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});
```

<Tip>
  Gebruik je een SPA of Inertia, dan wordt aanbevolen om de CSS vanuit JavaScript te importeren. Verwijder in dat geval `resources/css/app.css` uit de entry points en voeg `import '../css/app.css';` toe bovenaan `resources/js/app.js`.
</Tip>

## De ontwikkelserver starten

Tijdens het ontwikkelen start je de Vite-ontwikkelserver met `npm run dev`. Wijzig je een bestand, dan wordt de browser automatisch bijgewerkt (HMR).

```shell theme={null}
npm run dev
```

Je kunt hem ook tegelijk met de ontwikkelserver van Laravel starten.

```shell theme={null}
composer run dev
```

<Info>
  `composer run dev` start `php artisan serve` en `npm run dev` tegelijk.
</Info>

### Blade-views automatisch herladen

Stel je `refresh: true` in, dan wordt de browser automatisch herladen wanneer je een Blade-view of routebestand opslaat.

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Bij `refresh: true` worden wijzigingen in de volgende directories gemonitord:

* `resources/views/**`
* `app/Livewire/**`
* `routes/**`
* `lang/**`

## Productiebuild

Voer vóór het deployen naar productie `npm run build` uit. De assets worden gebundeld en geversioneerd en uitgevoerd naar `public/build/`.

```shell theme={null}
npm run build
```

Voorbeeld van de directorystructuur na de build:

```text theme={null}
public/
  build/
    assets/
      app-Cv82Mlke.css
      app-DnAZBF4U.js
    manifest.json
```

In `manifest.json` staat de mapping tussen bestandsnamen en hashes; de `@vite()`-directive gebruikt dit bestand om de juiste bestanden in te laden.

<Warning>
  De directory `public/build/` bevat buildartefacten, dus we raden aan die toe te voegen aan `.gitignore`. Voer de build uit op de deploybestemming, of bouw in CI en deploy daarna.
</Warning>

## Assets laden vanuit Blade

Voeg de `@vite()` Blade-directive toe aan de `<head>` van je layout.

```blade theme={null}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    @yield('content')
</body>
</html>
```

Importeer je de CSS vanuit JavaScript, geef dan alleen het JavaScript-entry point op.

```blade theme={null}
@vite('resources/js/app.js')
```

De `@vite()`-directive schakelt automatisch tussen ontwikkel- en productiegedrag.

| Situatie               | Gedrag                                                                            |
| ---------------------- | --------------------------------------------------------------------------------- |
| Ontwikkelserver draait | Assets worden geladen vanaf de Vite-ontwikkelserver en HMR is ingeschakeld        |
| Productie (gebouwd)    | Geversioneerde bestanden worden geladen op basis van `public/build/manifest.json` |

## Entry points voor JavaScript en CSS instellen

### JavaScript instellen

`resources/js/app.js` is het belangrijkste entry point. Van hieruit importeer je andere modules.

```js theme={null}
import './bootstrap';
import '../css/app.css';

// Eigen modules importeren
import './components/modal';
import './utils/format';
```

### CSS instellen

Globale styles schrijf je in `resources/css/app.css`.

```css theme={null}
/* Bij gebruik van Tailwind CSS */
@import 'tailwindcss';

/* Eigen styles */
body {
    font-family: 'Noto Sans JP', sans-serif;
}
```

### Meerdere entry points

Wil je per pagina verschillende assets bundelen, bijvoorbeeld voor een beheerpaneel, geef dan meerdere entry points op.

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/css/admin.css',
            'resources/js/admin.js',
        ]),
    ],
});
```

In Blade laad je alleen de bijbehorende entry points.

```blade theme={null}
{{-- Layout van het beheerpaneel --}}
@vite(['resources/css/admin.css', 'resources/js/admin.js'])
```

## Integratie met Tailwind CSS

Vanaf Tailwind CSS v4 wordt Tailwind geïntegreerd als Vite-plugin.

<Steps>
  <Step title="Installeer Tailwind">
    ```shell theme={null}
    npm install tailwindcss @tailwindcss/vite
    ```
  </Step>

  <Step title="Voeg de plugin toe aan vite.config.js">
    ```js theme={null}
    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import tailwindcss from '@tailwindcss/vite';

    export default defineConfig({
        plugins: [
            tailwindcss(),
            laravel([
                'resources/css/app.css',
                'resources/js/app.js',
            ]),
        ],
    });
    ```
  </Step>

  <Step title="Importeer Tailwind in je CSS">
    ```css theme={null}
    /* resources/css/app.css */
    @import 'tailwindcss';
    ```
  </Step>
</Steps>

<Info>
  Gebruik je Tailwind CSS v3, dan heb je `tailwind.config.js` en `postcss.config.js` nodig. In het nieuwste Tailwind CSS v4 zijn deze bestanden niet meer nodig.
</Info>

## Aliassen instellen

`laravel-vite-plugin` stelt automatisch de alias `@` in. Deze verwijst naar de directory `resources/js`.

```js theme={null}
// Importeren met een alias
import UserCard from '@/components/UserCard.vue';
// Bovenstaande is hetzelfde als:
import UserCard from '/resources/js/components/UserCard.vue';
```

Wil je eigen aliassen toevoegen, dan stel je die in via `resolve.alias`.

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
            '@css': '/resources/css',
            '@images': '/resources/images',
        },
    },
});
```

Voorbeeld van importeren met aliassen:

```js theme={null}
import logo from '@images/logo.png';
import '@css/custom.css';
```

## Configuratie per framework

### Vue

```shell theme={null}
npm install --save-dev @vitejs/plugin-vue
```

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
```

### React

```shell theme={null}
npm install --save-dev @vitejs/plugin-react
```

```js theme={null}
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});
```

Gebruik je React, voeg dan in je Blade-template de `@viteReactRefresh`-directive toe vóór `@vite`.

```blade theme={null}
@viteReactRefresh
@vite('resources/js/app.jsx')
```

## Statische assets verwerken

Ook afbeeldingen en fonts waarnaar je vanuit Blade-templates verwijst, kun je met Vite versioneren. Met de optie `assets` geef je de betreffende directories op.

```js theme={null}
laravel({
    input: 'resources/js/app.js',
    assets: ['resources/images/**', 'resources/fonts/**'],
})
```

In Blade-templates haal je de geversioneerde URL op met de methode `Vite::asset()`.

```blade theme={null}
<img src="{{ Vite::asset('resources/images/logo.png') }}" alt="Logo">
```

## Samenvatting

| Wat je wilt doen                               | Hoe                                                       |
| ---------------------------------------------- | --------------------------------------------------------- |
| De ontwikkelserver starten                     | `npm run dev`                                             |
| Productie-assets bouwen                        | `npm run build`                                           |
| Assets laden in Blade                          | `@vite(['resources/css/app.css', 'resources/js/app.js'])` |
| Automatisch herladen bij Blade-viewwijzigingen | `refresh: true` instellen in `vite.config.js`             |
| Tailwind CSS gebruiken                         | De plugin `@tailwindcss/vite` toevoegen                   |
| De alias `@` gebruiken                         | Verwijst standaard naar `resources/js`                    |
| Statische assets versioneren                   | De optie `assets` en `Vite::asset()` gebruiken            |

## Volgende stap

<Card title="Cache" href="/nl/cache" icon="database">
  Leer hoe je met de cachefunctionaliteit van Laravel de prestaties van je applicatie verder verbetert.
</Card>


## Related topics

- [Frontend](/nl/frontend.md)
- [De Copilot CLI bundelen](/nl/packages/laravel-copilot-sdk/bundle-cli.md)
- [Broadcasting](/nl/broadcasting.md)
- [Aan de slag met Laravel-testen in Pest PHP](/nl/blog/pest-introduction.md)
- [Artisan-console](/nl/artisan.md)