陌讯skills聚合平台

laravel-vite

📁 fusengine/agents 📅 Feb 10, 2026
12
总安装量
11
周安装量
#25721
全站排名
安装命令
npx skills add https://github.com/fusengine/agents --skill laravel-vite

Agent 安装分布

opencode 11
gemini-cli 11
github-copilot 11
codex 11
kimi-cli 11
amp 11

Skill 文档

Laravel Vite

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  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 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: 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
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。