Installation & Configuration
You can install the package via npm:
npm install --save-dev @defstudio/vite-livewire-plugin
Set up
Livewire hot reload can be enabled by adding the livewire() plugin to the vite.config.js file:
import {defineConfig} from 'vite'; import laravel from 'laravel-vite-plugin'; import livewire from '@defstudio/vite-livewire-plugin'; // <-- import export default defineConfig({ //... plugins: [ laravel([ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: false, // <-- disables laravel autorefresh, to avoid conflicts ]), livewire({ // <-- add livewire plugin refresh: ['resources/css/app.css'], // <-- will refresh css (tailwind ) as well }), ], });
and add the livewire hot reload manager in your app.js file:
//.. import {livewire_hot_reload} from 'virtual:livewire-hot-reload' livewire_hot_reload();
After the Vite server is started, you should see the init message on your browser console:
[vite] connecting... [vite] livewire hot reload ready. [vite] connected.
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):
[vite] css hot updated: /resources/css/app.css [vite] livewire hot updated.
Full refresh collisions
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.phpfile changes (i.e. laravel/vite-plugin with refresh option active) in order to make them work together,bladefiles in**/livewire/**should be excluded from blade hot reload. For Laravel Vite plugin, this config would solve the issue:
// vite.config.js export default defineConfig({ //... plugins: [ //... laravel({ // ... refresh: false, }) ], });