Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
View on GitHubFebruary 2, 2026
Select agents to install to:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/laravel-expert/skills/laravel-vite/SKILL.md -a claude-code --skill laravel-viteInstallation paths:
.claude/skills/laravel-vite/# Laravel Vite ## Agent Workflow (MANDATORY) Before ANY implementation, launch in parallel: 1. **fuse-ai-pilot:explore-codebase** - Check existing vite.config.js, package.json 2. **fuse-ai-pilot:research-expert** - Verify latest Vite docs via Context7 3. **mcp__context7__query-docs** - Query specific patterns (SSR, Inertia) After implementation, run **fuse-ai-pilot: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 1. **Always use laravel-vite-plugin** - Never raw Vite config 2. **VITE_ prefix for env vars** - Only exposed to frontend 3. **Use @vite directive** - Not manual script tags 4. **Build before deploy** - `npm run build` in CI/CD 5. **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](references/setup.md) | Initial configuration | | **Entry Points** | [entry-points.md](references/entry-points.md) | Multiple bundles | | **Preprocessors** | [preprocessors.md](references/preprocessors.md) | Sass, Less, PostCSS | | **A