laravel-vite
SkillAI & modelsComplete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the laravel-vite skill
What this skill tells your AI
The instructions your AI receives, as published by fusengine/agents in plugins/laravel-expert/skills/laravel-vite/SKILL.md and read by ahel’s review.
Laravel Vite
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- fuse-ai-pilot:explore-codebase - Check existing vite.config.js, package.json
- fuse-ai-pilot:research-expert - Verify latest Vite docs via Context7
- 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
- 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 buildin 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: truefor 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-reactv4+ - 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
Signals
- GitHub stars
- 25
- Forks
- 4
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
laravel-vite- Source
- github.com/fusengine/agents