@defstudio/vite-livewire-plugin weekly downloads statistics

Vite Livewire Plugin

Vite has become Laravel's default frontend build tool.

This plugin (made by def:studio) configures Vite for use with a Livewire setup, allowing components hot reload without losing their state when their blade or class files change.

Demo video available below in this page

Installation

Prior to install, read carefully our documentation at https://docs.defstudio.it/vite-livewire-plugin

Usage

Livewire hot reload can be enabled by adding the livewire() plugin to the vite.config.js file:

and add the livewire hot reload manager in your app.js file:

After the Vite server is started, you should see the init message on your browser console:

From now on, when a .blade.php or Livewire .php class is updated, the hot reload will trigger a refresh for all Livewire components in page (and the app.css file as well):

Warning This Vite plugin, as Livewire needs to persist in page, is not fully compatible with other plugins that full refresh the page when a .blade.php file changes (i.e. laravel/vite-plugin with refresh option active) in order to make them work together, blade files in /livewire/ should be excluded from blade hot reload. For Laravel Vite plugin, this config would solve the issue:

Usage & Documentation

An extensive documentation is available at

https://docs.defstudio.it/vite-livewire-plugin

Changelog

Please see CHANGELOG for more information on what has changed recently. Follow Us on Twitter for more updates about this package.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Fabio Ivona • All Contributors

License

The MIT License (MIT). Please see License File for more information.

Demo

https://user-images.githubusercontent.com/8792274/176996785-d4e21ee5-b9f3-4e91-bf3a-4bbc0e87a148.mp4

Description from the npm listing.