Vite Livewire Plugin

Vite has become Laravel's default frontend build tool.

This plugin (made by def:studio) configures Vite for use with a Livewire setup, allowing components hot reload without losing their state when their blade or class files change.

Demo video available below in this page

Installation

npm install --save-dev @defstudio/vite-livewire-plugin

Usage

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.

// vite.config.js
export default defineConfig({
//...
    plugins: [
        //...
    
        laravel({
            // ...
            refresh: false,
        })
    ],
});

Watching files for hot reload trigger

by default livewire() plugin will trigger hot reload when a .blade.php file changes in resources/views/** folders or a .php file changes in app/**/Livewire/**, app/**/Filament/** or app/View/Components/** folders.

if you wish to add/change this behavior (because you have livewire files in other locations), this can be achieved using the watch config:

// vite.config.js 

import livewire, {defaultWatches} from '@defstudio/vite-livewire-plugin';

export default defineConfig({
    //...
    
    plugins: [
        //...
        
        livewire({
            refresh: ['resources/css/app.css'],
            watch: [
                ...defaultWatches,
                '**/domains/**/Livewire/**/*.php',
            ]
        }),
    ],
});

Opt in hot reload

In some cases (i.e. when working on non-livewire elements), you'll want to full reload the page when a blade file is changed.

By adding an VITE_LIVEWIRE_OPT_IN=true entry in your .env file an opt-in checkbox will show on the bottom right corner of the webpage, allowing you to enable/disable livewire hot reload. If disabled: a full page reload will be triggered when blade files are changed.

If you're using a debug toolbar like Debugbar for Laravel, Clockwork or Laravel Telescope Toolbar, these are taken into account, while positioning the checkbox. No special configuration is needed. There may be another (debug) toolbar or something else in your view interfere with the checkbox. Therefore, a config option bottomPosition is available to add more spacing to the bottom, to make the checkbox visible again. The value must be of type number and is considered to be pixels.

// vite.config.js 

import livewire, {defaultWatches} from '@defstudio/vite-livewire-plugin';

export default defineConfig({
    //...
    
    plugins: [
        //...
        
        livewire({
            bottomPosition: 34,
        }),
    ],
});

Changelog

Please see CHANGELOG for more information on what has changed recently. Follow Us on Twitter for more updates about this package.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Fabio Ivona
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Demo