Laravel Vite
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- explore-codebase - Check existing vite.config.js, package.json
- research-expert - Verify latest Vite docs via Context7
- mcp__context7__query-docs - Query specific patterns (SSR, Inertia)
After implementation, run sniper for validation.
Overview
Vite is Laravel's default frontend build tool. It provides fast HMR in development and optimized builds for production.
| Feature |
Purpose |
| HMR |
Instant updates during development |
| Bundling |
Optimized production assets |
| SSR |
Server-side rendering support |
| Frameworks |
Vue, React, Svelte integration |
Critical Rules
- Always use laravel-vite-plugin - Never raw Vite config
- VITE_ prefix for env vars - Only exposed to frontend
- Use @vite directive - Not manual script tags
- Build before deploy -
npm run build in CI/CD
- Configure HMR for Docker - Set
server.host: '0.0.0.0'
Decision Guide
Stack Selection
Using Tailwind CSS?
├── YES → v4? @tailwindcss/vite plugin
│ v3? PostCSS config
└── NO → Just laravel-vite-plugin
Using JavaScript framework?
├── Vue → @vitejs/plugin-vue
├── React → @vitejs/plugin-react
├── Svelte → @sveltejs/vite-plugin-svelte
└── None → Plain JS/CSS only
SSR Decision
Need SEO/fast first paint?
├── YES → Using Inertia?
│ ├── YES → Inertia SSR
│ └── NO → Consider Inertia or Livewire
└── NO → Client-side only
Reference Guide
Concepts (WHY & Architecture)
| Topic |
Reference |
When to Consult |
| Setup |
setup.md |
Initial configuration |
| Entry Points |
entry-points.md |
Multiple bundles |
| Preprocessors |
preprocessors.md |
Sass, Less, PostCSS |
| Assets |
assets.md |
Images, fonts, static |
| Environment |
environment.md |
VITE_ variables |
| Dev Server |
dev-server.md |
HMR, Docker, HTTPS |
| Build |
build-optimization.md |
Chunks, minification |
| SSR |
ssr.md |
Server-side rendering |
| Inertia |
inertia.md |
SPA without API |
| Frameworks |
frameworks.md |
Vue, React, Svelte |
| Security |
security.md |
CSP nonce |
| Deployment |
deployment.md |
Production, CDN |
Templates (Complete Code)
| Template |
When to Use |
| ViteConfig.js.md |
Standard setup |
| ViteConfigAdvanced.js.md |
Full optimization |
| InertiaSetup.md |
Inertia + Vue/React |
| SSRSetup.md |
SSR configuration |
Quick Reference
Basic Setup
// vite.config.js
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,
}),
],
});
Blade Directive
<!DOCTYPE html>
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
Commands
| Command |
Purpose |
npm run dev |
Start dev server |
npm run build |
Production build |
npm run preview |
Preview build |
Best Practices
DO
- Use
refresh: true for Blade HMR
- Configure aliases for clean imports
- Split vendors into separate chunks
- Use
VITE_ prefix for frontend env vars
- Test Docker/Sail config locally
DON'T
- Expose sensitive data via VITE_ vars
- Forget to build before deploying
- Use absolute paths for assets
- Skip source maps in staging
- Ignore chunk size warnings
Laravel 13 Notes
laravel/vite-plugin reste compatible Laravel 13 + Vite 6. Adaptations :
- Le helper
@vite() Blade fonctionne sans changement
- Pour Inertia 2 + React 19 : utiliser le preset
@vitejs/plugin-react v4+
- HMR via WebSocket : Reverb 1.4 et Vite peuvent cohabiter sur des ports distincts en dev
- Build production : ajouter
build.target: 'es2023' pour profiter de PHP 8.3 côté serveur
1---2name: laravel-vite-23description: Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.4---56<objective>7Covers Vite as Laravel's frontend build tool: initial setup and the8laravel-vite-plugin, multiple entry points, CSS preprocessors9(Sass/Less/PostCSS), asset handling, VITE_-prefixed environment variables,10the dev server and HMR (including Docker configuration), build optimization11(chunking, minification), server-side rendering, Inertia integration, JS12framework plugins (Vue/React/Svelte), CSP nonce security, and production13deployment.14</objective>1516# Laravel Vite1718## Agent Workflow (MANDATORY)1920Before ANY implementation, use `TeamCreate` to spawn 3 agents:21221. **explore-codebase** - Check existing vite.config.js, package.json232. **research-expert** - Verify latest Vite docs via Context7243. **mcp__context7__query-docs** - Query specific patterns (SSR, Inertia)2526After implementation, run **sniper** for validation.2728---2930## Overview3132Vite is Laravel's default frontend build tool. It provides fast HMR in development and optimized builds for production.3334| Feature | Purpose |35|---------|---------|36| **HMR** | Instant updates during development |37| **Bundling** | Optimized production assets |38| **SSR** | Server-side rendering support |39| **Frameworks** | Vue, React, Svelte integration |4041---4243## Critical Rules44451. **Always use laravel-vite-plugin** - Never raw Vite config462. **VITE_ prefix for env vars** - Only exposed to frontend473. **Use @vite directive** - Not manual script tags484. **Build before deploy** - `npm run build` in CI/CD495. **Configure HMR for Docker** - Set `server.host: '0.0.0.0'`5051---5253## Decision Guide5455### Stack Selection5657```58Using Tailwind CSS?59├── YES → v4? @tailwindcss/vite plugin60│ v3? PostCSS config61└── NO → Just laravel-vite-plugin6263Using JavaScript framework?64├── Vue → @vitejs/plugin-vue65├── React → @vitejs/plugin-react66├── Svelte → @sveltejs/vite-plugin-svelte67└── None → Plain JS/CSS only68```6970### SSR Decision7172```73Need SEO/fast first paint?74├── YES → Using Inertia?75│ ├── YES → Inertia SSR76│ └── NO → Consider Inertia or Livewire77└── NO → Client-side only78```7980---8182## Reference Guide8384### Concepts (WHY & Architecture)8586| Topic | Reference | When to Consult |87|-------|-----------|-----------------|88| **Setup** | [setup.md](references/setup.md) | Initial configuration |89| **Entry Points** | [entry-points.md](references/entry-points.md) | Multiple bundles |90| **Preprocessors** | [preprocessors.md](references/preprocessors.md) | Sass, Less, PostCSS |91| **Assets** | [assets.md](references/assets.md) | Images, fonts, static |92| **Environment** | [environment.md](references/environment.md) | VITE_ variables |93| **Dev Server** | [dev-server.md](references/dev-server.md) | HMR, Docker, HTTPS |94| **Build** | [build-optimization.md](references/build-optimization.md) | Chunks, minification |95| **SSR** | [ssr.md](references/ssr.md) | Server-side rendering |96| **Inertia** | [inertia.md](references/inertia.md) | SPA without API |97| **Frameworks** | [frameworks.md](references/frameworks.md) | Vue, React, Svelte |98| **Security** | [security.md](references/security.md) | CSP nonce |99| **Deployment** | [deployment.md](references/deployment.md) | Production, CDN |100101### Templates (Complete Code)102103| Template | When to Use |104|----------|-------------|105| [ViteConfig.js.md](references/templates/ViteConfig.js.md) | Standard setup |106| [ViteConfigAdvanced.js.md](references/templates/ViteConfigAdvanced.js.md) | Full optimization |107| [InertiaSetup.md](references/templates/InertiaSetup.md) | Inertia + Vue/React |108| [SSRSetup.md](references/templates/SSRSetup.md) | SSR configuration |109110---111112## Quick Reference113114### Basic Setup115116```javascript117// vite.config.js118import { defineConfig } from 'vite';119import laravel from 'laravel-vite-plugin';120121export default defineConfig({122 plugins: [123 laravel({124 input: ['resources/css/app.css', 'resources/js/app.js'],125 refresh: true,126 }),127 ],128});129```130131### Blade Directive132133```blade134<!DOCTYPE html>135<head>136 @vite(['resources/css/app.css', 'resources/js/app.js'])137</head>138```139140### Commands141142| Command | Purpose |143|---------|---------|144| `npm run dev` | Start dev server |145| `npm run build` | Production build |146| `npm run preview` | Preview build |147148---149150## Best Practices151152### DO153- Use `refresh: true` for Blade HMR154- Configure aliases for clean imports155- Split vendors into separate chunks156- Use `VITE_` prefix for frontend env vars157- Test Docker/Sail config locally158159### DON'T160- Expose sensitive data via VITE_ vars161- Forget to build before deploying162- Use absolute paths for assets163- Skip source maps in staging164- Ignore chunk size warnings165166---167168## Laravel 13 Notes169170`laravel/vite-plugin` reste compatible **Laravel 13 + Vite 6**. Adaptations :171172- Le helper `@vite()` Blade fonctionne sans changement173- Pour Inertia 2 + React 19 : utiliser le preset `@vitejs/plugin-react` v4+174- HMR via WebSocket : Reverb 1.4 et Vite peuvent cohabiter sur des ports distincts en dev175- Build production : ajouter `build.target: 'es2023'` pour profiter de PHP 8.3 côté serveur
fusengine