Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
From fuse-laravelnpx claudepluginhub fusengine/agents --plugin fuse-laravelThis skill uses the workspace's default tool permissions.
references/assets.mdreferences/build-optimization.mdreferences/deployment.mdreferences/dev-server.mdreferences/entry-points.mdreferences/environment.mdreferences/frameworks.mdreferences/inertia.mdreferences/preprocessors.mdreferences/security.mdreferences/setup.mdreferences/ssr.mdreferences/templates/InertiaSetup.mdreferences/templates/SSRSetup.mdreferences/templates/ViteConfig.js.mdreferences/templates/ViteConfigAdvanced.js.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
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 |
npm run build in CI/CDserver.host: '0.0.0.0'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
Need SEO/fast first paint?
├── YES → Using Inertia?
│ ├── YES → Inertia SSR
│ └── NO → Consider Inertia or Livewire
└── NO → Client-side only
| 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 |
| Template | When to Use |
|---|---|
| ViteConfig.js.md | Standard setup |
| ViteConfigAdvanced.js.md | Full optimization |
| InertiaSetup.md | Inertia + Vue/React |
| SSRSetup.md | SSR configuration |
// 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,
}),
],
});
<!DOCTYPE html>
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
| Command | Purpose |
|---|---|
npm run dev | Start dev server |
npm run build | Production build |
npm run preview | Preview build |
refresh: true for Blade HMRVITE_ prefix for frontend env vars