laravel-vite
Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
Best use case
laravel-vite is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
Teams using laravel-vite should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/laravel-vite/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How laravel-vite Compares
| Feature / Agent | laravel-vite | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## 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 |
| **Assets** | [assets.md](references/assets.md) | Images, fonts, static |
| **Environment** | [environment.md](references/environment.md) | VITE_ variables |
| **Dev Server** | [dev-server.md](references/dev-server.md) | HMR, Docker, HTTPS |
| **Build** | [build-optimization.md](references/build-optimization.md) | Chunks, minification |
| **SSR** | [ssr.md](references/ssr.md) | Server-side rendering |
| **Inertia** | [inertia.md](references/inertia.md) | SPA without API |
| **Frameworks** | [frameworks.md](references/frameworks.md) | Vue, React, Svelte |
| **Security** | [security.md](references/security.md) | CSP nonce |
| **Deployment** | [deployment.md](references/deployment.md) | Production, CDN |
### Templates (Complete Code)
| Template | When to Use |
|----------|-------------|
| [ViteConfig.js.md](references/templates/ViteConfig.js.md) | Standard setup |
| [ViteConfigAdvanced.js.md](references/templates/ViteConfigAdvanced.js.md) | Full optimization |
| [InertiaSetup.md](references/templates/InertiaSetup.md) | Inertia + Vue/React |
| [SSRSetup.md](references/templates/SSRSetup.md) | SSR configuration |
---
## Quick Reference
### Basic Setup
```javascript
// 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
```blade
<!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 warningsRelated Skills
laravel
Use when implementing or debugging this Laravel v12 app; leverage Laravel Boost MCP (search-docs, artisan, schema, logs, tinker) and follow project conventions.
laravel-type-bridge-development
Generate TypeScript/JavaScript type artifacts from Laravel PHP definitions — enums, i18n translations, and enum translator composables.
laravel-inertia-isolated-plugin-architect
Create a Laravel plugin with an isolated UI which is provided by Inertia.js and Vue.js which can live on any Laravel host app no matter of the used technology in the frontend.
laravel-expert
Senior Laravel Engineer role for production-grade, maintainable, and idiomatic Laravel solutions. Focuses on clean architecture, security, performance, and modern standards (Laravel 10/11+).
laravel-12-best-practices
Software engineering best practices for Laravel 12.x, covering architecture, Eloquent, testing, security, and the new starter kits.
awesome-copilot-root-laravel-expert-agent
Expert Laravel development assistant specializing in modern Laravel 12+ applications with Eloquent, Artisan, testing, and best practices Use when: the task directly matches laravel expert agent responsibilities within plugin awesome-copilot-root. Do not use when: a more specific framework or task-focused skill is clearly a better match.
laravel-tall-stack-best-practices-cursorrules-prom-cursorrules
Apply for laravel-tall-stack-best-practices-cursorrules-prom. --- description: Laravel specific best practices for different modules and features. globs: /**/*.php
Laravel API
REST and JSON API standards for modern Laravel backends.
agent-laravel-specialist
Expert Laravel specialist mastering Laravel 10+ with modern PHP practices. Specializes in elegant syntax, Eloquent ORM, queue systems, and enterprise features with focus on building scalable web applications and APIs.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
moai-lang-{{LANGUAGE_SLUG}}
{{LANGUAGE_NAME}} best practices with modern frameworks, {{PRIMARY_DOMAIN}}, and performance optimization for 2025
moai-lang-elixir
Elixir 1.17+ development specialist covering Phoenix 1.7, LiveView, Ecto, and OTP patterns. Use when developing real-time applications, distributed systems, or Phoenix projects.