Vite Livewire Plugin

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:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
 
import livewire from '@defstudio/vite-livewire-plugin'; // <-- import
 
export default defineConfig({
    //...
 
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
 
        livewire({
            // refresh css (tailwind ) as well
            refresh: ['resources/css/app.css'],
        }),
    ],
});

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.