Claude Skills
CollectionsCompareWorkflowsNominate
Sign inSign up
© 2026 Curated Agent Skills·Learn more about Agent Skills
Back to repository

laravel-vite

verified

Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.

View on GitHub

Marketplace

fusengine-plugins

fusengine/agents

Plugin

fuse-laravel

development

Repository

fusengine/agents
3stars

plugins/laravel-expert/skills/laravel-vite/SKILL.md

Last Verified

February 2, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/laravel-expert/skills/laravel-vite/SKILL.md -a claude-code --skill laravel-vite

Installation paths:

Claude
.claude/skills/laravel-vite/
Powered by add-skill CLI

Instructions

# 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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
4059 chars