skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

laravel-vite

Configure Vite for Laravel projects with HMR and production builds.

22|3|Updated Jan 10, 2026
Search Tags:#react#optimization#vue#laravel#vite#hmr#frontend build
One-click install
npx skills add https://github.com/fusengine/agents --skill laravel-vite
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: laravel-vite
Source: https://github.com/fusengine/agents/tree/main/plugins/laravel-expert/skills/laravel-vite
Command: npx skills add https://github.com/fusengine/agents --skill laravel-vite

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the configuration and optimization of Vite, Laravel's default frontend build tool, ensuring fast development and efficient production builds.

Core Features & Use Cases

  • Rapid Development: Enables fast Hot Module Replacement (HMR) for instant feedback during development.
  • Optimized Production Builds: Configures Vite for optimal asset bundling, code splitting, and minification for production deployment.
  • Framework Integration: Supports seamless integration with Vue, React, and Svelte.
  • Use Case: When setting up a new Laravel project or migrating an existing one, use this Skill to configure vite.config.js for optimal performance, including HMR, CSS preprocessors, and framework-specific plugins.

Quick Start

Configure vite.config.js for a standard Laravel project with Vue and Tailwind CSS.

Frequently Asked Questions about laravel-vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Vite for a Laravel project with Vue or React?▼

Configuring Vite for a Laravel project involves setting up vite.config.js to integrate framework-specific plugins for Vue or React. This Skill streamlines that setup, managing frontend assets and enabling fast Hot Module Replacement for instant development feedback.

What is the best way to optimize Vite production builds in Laravel?▼

Optimizing Vite production builds in Laravel requires configuring asset bundling, code splitting, and minification. This Skill configures these optimization techniques automatically, ensuring efficient production deployment tailored for Laravel's Blade templating and deployment workflows.

Does Vite work with Svelte and CSS preprocessors in a Laravel application?▼

Yes, Vite works with Svelte and CSS preprocessors in a Laravel application. This Skill supports seamless integration with Vue, React, and Svelte, while also configuring CSS preprocessors to handle your styling requirements effectively within the frontend build pipeline.

Why does Vite HMR not work in my Laravel project?▼

Vite HMR may not work in a Laravel project if vite.config.js lacks proper configuration for your specific framework. This Skill resolves such issues by correctly configuring HMR and frontend assets, enabling instant feedback during development.

Related Skills

Explore More Software Engineering Skills→
relaticlerelaticle
1.5k

spatie-laravel-php

Enforce Spatie's Laravel and PHP coding standards across Laravel code and Blade templates.

Official
Intermediate
itechmeatitechmeat
22

vite

Configure Vite dev servers and production builds with Rollup and plugins.

Community
Advanced
liamtran96liamtran96

tailwindcss

Apply utility classes to style web interfaces across React, Vue, Svelte, and HTML.

Community
Intermediate
ai-enhanced-engineerai-enhanced-engineer
3

laravel-mix-webpack

Configure Laravel Mix Webpack builds and hot reload for React SPAs.

Official
Advanced