Assets bundelen met Vite - Knowledge of Laravel

Wat zijn Laravel en Vite?

Vite 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)

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.

Wil je eerst weten welke plek Vite inneemt binnen de totale frontend-opzet van Laravel, bekijk dan eerst het overzicht op Frontend.

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.

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:

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).

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

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.

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).

npm run dev

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

composer run dev

composer run dev start php artisan serve en npm run dev tegelijk.

Blade-views automatisch herladen

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

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/.

npm run build

Voorbeeld van de directorystructuur na de build:

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.

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.

Assets laden vanuit Blade

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

<!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.

@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.

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.

/* 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.

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.

{{-- 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.

Installeer Tailwind

npm install tailwindcss @tailwindcss/vite

Voeg de plugin toe aan vite.config.js

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',
        ]),
    ],
});

Importeer Tailwind in je CSS

/* resources/css/app.css */
@import 'tailwindcss';

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.

Aliassen instellen

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

// 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.

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:

import logo from '@images/logo.png';
import '@css/custom.css';

Configuratie per framework

Vue

npm install --save-dev @vitejs/plugin-vue

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

npm install --save-dev @vitejs/plugin-react

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.

@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.

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().

<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

Cache

Leer hoe je met de cachefunctionaliteit van Laravel de prestaties van je applicatie verder verbetert.

​Wat zijn Laravel en Vite?

​Installatie en configuratie

​Controleren of Node is geïnstalleerd

​Packages installeren

​vite.config.js configureren

​De ontwikkelserver starten

​Blade-views automatisch herladen

​Productiebuild

​Assets laden vanuit Blade

​Entry points voor JavaScript en CSS instellen

​JavaScript instellen

​CSS instellen

​Meerdere entry points

​Integratie met Tailwind CSS

​Aliassen instellen

​Configuratie per framework

​Vue

​React

​Statische assets verwerken

​Samenvatting

​Volgende stap

Cache

Wat zijn Laravel en Vite?

Installatie en configuratie

Controleren of Node is geïnstalleerd

Packages installeren

vite.config.js configureren

De ontwikkelserver starten

Blade-views automatisch herladen

Productiebuild

Assets laden vanuit Blade

Entry points voor JavaScript en CSS instellen

JavaScript instellen

CSS instellen

Meerdere entry points

Integratie met Tailwind CSS

Aliassen instellen

Configuratie per framework

Vue

React

Statische assets verwerken

Samenvatting

Volgende stap