vite-plugin-ziggy-sync

I built this Vite plugin specifically for Laravel 11 projects to automatically synchronize and generate Ziggy routes during development.

It watches your Laravel routes/ directory and intelligently executes php artisan ziggy:generate in the background without blocking Vite's Hot Module Replacement (HMR) thread.

Why did I build this plugin?

The official Ziggy documentation explicitly notes:

"If you are generating your Ziggy config as a file by running php artisan ziggy:generate, you may want to re-run that command when your app's route files change."

While setting up a basic Vite watcher to trigger this command seemed trivial at first, I quickly realized that doing it correctly without impacting the Developer Experience (DX) is quite tricky. Naively executing a child process inside a Vite watcher blocks the Node.js event loop, which severely degrades or even breaks Hot Module Replacement (HMR) performance.

I created vite-plugin-ziggy-sync to provide a production-ready solution to this execution bottleneck. My plugin features:

• Concurrency Control: It prevents multiple overlapping child processes if you save your route files rapidly, avoiding zombie processes.
• I/O Debouncing: It delays execution by a configurable threshold (default 500ms) to batch I/O operations and free up the Vite server thread.
• Smart Environment Detection: I designed it to automatically detect and use Laravel Sail if available, seamlessly falling back to your local PHP binary.

Installation

You can install the plugin via npm as a dev dependency:

npm install -D vite-plugin-ziggy-sync