Dé frontend tool in je Laravel project, ontmoet Vite+

Je hebt Vite draaien in je Laravel-project. De dev-server start snel, HMR werkt, en npm run build doet wat het moet doen. Maar naast Vite gebruik je misschien ook nog ESLint, Prettier, Vitest, een .node-version om de Node-versie bij te houden, en een package.json met allerlei scripts voor development en productie.

Ieder van die tools heeft zijn eigen config, zijn eigen versie en zijn eigen manier om "op mijn machine werkt het wel" te veroorzaken. Vite+ probeert deze problemen op te lossen.

Wat is Vite+?

Vite+ is een bundeling van frontend tools voor web development, uitgebracht door VoidZero — het bedrijf van Evan You, de maker van Vite en Vue. Het werd op 13 maart 2026 als alpha gelanceerd onder de MIT-licentie. Oorspronkelijk werd Vite+ op ViteConf Amsterdam (oktober 2025) aangekondigd als een commercieel, source-available product, maar op basis van community-feedback is VoidZero vóór de alpha-release overgestapt naar een volledig open-source MIT-licentie.

Het idee: in plaats van vijf losse tools gebruik je er maar "één", de vp binary. Vite+ bundelt:

Vite + Rolldown — de bundler; Rolldown vervangt zowel Rollup als esbuild als productie-bundler
Oxlint — een Rust-gebaseerde linter, ESLint-compatibel
Oxfmt — een Rust-gebaseerde formatter, Prettier-compatibel
Vitest — de test runner, ingebouwd zonder aparte installatie
tsdown — voor library bundling en package publicatie
tsgo — type-checking via de Go-gebaseerde TypeScript compiler
Vite Task — een ingebouwde task runner als alternatief voor npm-scripts

Alles wordt geconfigureerd via één bestand, wat je al kent: vite.config.js (of .ts).

Hoe werkt het met package managers en Node.js?

Package managers

Vite+ neemt het beheer van je package manager over. Met vp install — en vergelijkbare commando's — detecteert het automatisch welke package manager je project gebruikt. Die detectie werkt op basis van twee bronnen:

Het packageManager-veld in package.json, als dat aanwezig is.

De aanwezigheid van lock- of configuratiebestanden: pnpm-lock.yaml, pnpm-workspace.yaml, yarn.lock, .yarnrc.yml, yarn.config.cjs, package-lock.json, bun.lock, bun.lockb, bunfig.toml, .pnpmfile.cjs of pnpmfile.cjs.

Op basis van die detectie downloadt Vite+ automatisch de juiste versie van de package manager en voert het commando daarmee uit. Je hoeft zelf niets globaal te installeren of te switchen.

Wordt er niets gevonden, dan valt Vite+ terug op pnpm.

Node.js-versie

Met vp env beheer je de Node.js-versie. Er zijn drie manieren:

vp env use 22 # Gebruik Node.js 22 in de huidige shell
vp env pin 22 # Zet Node.js 22 vast voor dit project
vp env default 22 # Stel Node.js 22 in als globale standaard

Dit vervangt tools zoals nvm. Let op: Vite+ maakt gebruik van .node-version-bestanden, niet van .nvmrc. Het commando vp env pin schrijft een .node-version-bestand weg. Projecten die nu een .nvmrc gebruiken moeten dus een .node-version-bestand aanmaken.

Zo gebruik je het in een Laravel-project

Laravel integreert Vite via laravel-vite-plugin. Je @vite()-aanroepen in Blade en de structuur van resources/js en resources/css blijven hetzelfde. Omdat Vite+ gebouwd is op Vite 8, is wel een upgrade naar laravel-vite-plugin v3.0.0 (uitgebracht op 19 maart 2026) vereist. Dit is een major version bump met breaking changes — onder andere rond het gedrag van import.meta.glob en een nieuwe assets-configuratieoptie. Controleer de changelog van de plugin bij het migreren.

Stap 1: Installeer vp globaal

macOS / Linux: curl -fsSL https://vite.plus | bash
Windows (PowerShell): irm https://vite.plus/ps1 | iex

Open daarna een nieuwe terminal en controleer de installatie:

vp --version

Stap 2a: Migreer een bestaand project (aanbevolen)

Voor een bestaand project is vp migrate de aanbevolen route. Het commando analyseert je project en past package.json, vite.config.ts en je scripts automatisch aan.

cd mijn-laravel-project
vp migrate

Controleer daarna de wijzigingen in je versiebeheersysteem voordat je verder gaat.

Stap 2b: Handmatige migratie

Wil je precies weten wat er verandert, dan kun je het handmatig doen.

Installeer de benodigde packages:

npm install -D vite-plus @voidzero-dev/vite-plus-core@latest

Voeg daarna overrides toe in package.json zodat vite en vitest doorverwijzen naar de Vite+-versies. Welk veld je gebruikt hangt af van je package manager:

{
  "overrides": {
    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
  }
}

Gebruik je pnpm, dan gaan de overrides in pnpm-workspace.yaml:

overrides:
  vite: "npm:@voidzero-dev/vite-plus-core@latest"
  vitest: "npm:@voidzero-dev/vite-plus-test@latest"

Gebruik je Yarn, dan heet het veld resolutions in package.json:

{
  "resolutions": {
    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
  }
}

Pas vervolgens de import in vite.config.ts aan. Vergeet niet ook de laravel-vite-plugin te upgraden naar v3.0.0:

import { defineConfig } from 'vite-plus'; // was: 'vite'
import laravel from 'laravel-vite-plugin';

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

  // Optioneel: linting, formatting en tests via Vite+
  lint: {
    include: ['resources/js/**/*.{js,ts,vue}'],
  },
  fmt: {
    include: ['resources/js/**/*.{js,ts,vue}'],
  },
  test: {
    include: ['resources/js/tests/**/*.test.{js,ts}'],
  },
});

Update ten slotte de scripts in package.json:

{
  "scripts": {
    "dev": "vp dev",
    "build": "vp build",
    "check": "vp check",
    "test": "vp test"
  }
}

Of je daarna de losse configuratiebestanden voor ESLint, Prettier en Vitest kunt verwijderen, hangt af van je eigen setup. Controleer of je ignore-regels en eventuele aanpassingen zijn meegenomen in de lint-, fmt- en test-blokken van je vite.config.ts.

Conclusie

Vite+ is een interessante ontwikkeling. Het idee — één tool voor je volledige frontend-toolchain — lost een reëel probleem op. De automatische package manager-detectie en het geïntegreerde Node.js-beheer zijn praktisch, en de migratie via vp migrate maakt de drempel laag.

Tegelijk is Vite+ nog alpha. De API kan veranderen, niet alle edge cases zijn gedekt, en de documentatie is op sommige plekken nog beperkt. Voor nieuwe projecten of een experimenteer-branch is het nu al goed bruikbaar. Voor bestaande productieprojecten is wat voorzichtigheid op zijn plaats: test grondig en volg de changelogs.

Volg de voortgang via viteplus.dev en github.com/voidzero-dev/vite-plus.