Vite 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';


4import livewire from '@defstudio/vite-livewire-plugin'; // <-- import


6export default defineConfig({

7 //...


9 plugins: [

10 laravel([

11 'resources/css/app.css',

12 'resources/js/app.js',

13 ]),


15 livewire({

16 // refresh css (tailwind ) as well

17 refresh: ['resources/css/app.css'],

18 }),

19 ],


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.

Source link


Leave a Reply

Your email address will not be published. Required fields are marked *