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.

---

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)

Templates (Complete Code)

---

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

---

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