Vite Livewire Plugin

Developer Tools

August 2nd, 2022

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:

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.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.