Laravel0Vite Livewire Plugin | Laravel News

The Laravel Vite plugin for Livewire makes it easy to configure Laravel apps to use Vite with Livewire. It allows components to hot reload without losing state when the component’s blade file or class changes.

Here’s an example of using the livewire() plugin in the vite.config.js file:

 1import {defineConfig} from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3 
 4import livewire from '@defstudio/vite-livewire-plugin'; // <-- import
 5 
 6export default defineConfig({
 7    //...
 8 
 9    plugins: [
10        laravel([
11            'resources/css/app.css',
12            'resources/js/app.js',
13        ]),
14 
15        livewire({
16            // refresh css (tailwind ) as well
17            refresh: ['resources/css/app.css'],
18        }),
19    ],
20});

Vite for Livewire has other customization options, which you can read about in the project’s readme. Also, you can see it in action with this demo video.

You can get started by installing this plugin as an NPM module and following the installation instructions on GitHub: vite-livewire-plugin.