laravel-vite_skill

This skill configures Laravel Vite pipelines to optimize assets, HMR, SSR, and framework integration for faster development and production builds.

TypeScript

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill fusengine/agents --skill laravel-vite

SKILL.md4.9 KB

Overview

This skill provides a complete Laravel Vite integration for frontend build pipelines: assets, HMR, SSR, framework plugins, and build optimization. It codifies recommended configuration, critical rules, and templates so teams can standardize fast development and reliable production builds. Use it to reduce manual Vite mistakes and ensure consistent deployments across local, Docker, and CI environments.

How this skill works

Before any implementation, spawn three agents with TeamCreate to inspect the codebase, verify current Vite docs, and query patterns for SSR or Inertia. The skill enforces use of the laravel-vite-plugin, VITE_ env variable conventions, and the @vite Blade directive while offering templates for standard and advanced vite.config setups. It validates configuration and runs a final validation agent to ensure HMR, Docker settings, and build outputs are correct.

When to use it

Setting up or migrating a Laravel app to use Vite for dev and production builds
Configuring HMR for local development or Docker/Sail environments
Adding framework integrations (Vue, React, Svelte) or SSR/Inertia support
Optimizing production bundles, splitting vendors, and configuring aliases
Standardizing CI/CD to run build steps and validate outputs before deploy

Best practices

Always use laravel-vite-plugin instead of raw Vite config for Laravel integration
Prefix frontend environment variables with VITE_ and never expose secrets
Use @vite Blade directive for asset injection and refresh: true for Blade HMR
Configure server.host = '0.0.0.0' for Docker HMR and test Sail locally
Run npm run build in CI/CD and validate asset integrity and chunk sizes

Example use cases

Enable instant HMR for Blade-driven pages during local development
Add Vue or React plugin and set entry points for multi-bundle apps
Configure SSR for SEO-critical landing pages using Inertia or server rendering
Optimize production by splitting vendor chunks and enabling minification
Prepare Docker-based dev environment with host binding and secure env handling

FAQ

Yes. The plugin handles Laravel-specific asset routing, Blade refresh hooks, and simplifies integration; avoid raw Vite configs for Laravel projects.

How should I expose environment variables to the frontend?

Only expose variables prefixed with VITE_. Never place secrets in these variables; keep secrets on the server or CI secrets store.

What settings are required for HMR inside Docker?

Set server.host to '0.0.0.0', configure correct port forwarding, and ensure refresh: true in the laravel-vite-plugin for Blade HMR.