Vite with Laravel: Auto-refresh Blade views

2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #blade

We're up and running, but there's another Laravel-specific quality of life improvement we can make: auto-refreshing when a Blade file changes.

To do this, we'll write a simple Blade plugin right inside the Vite configuration.

I didn't write this plugin myself, this is an except from innocenzi/laravel-vite.

The plugin listens to changes in .blade.php files, and does a full reload when they change.

// vite.config.js
export default ({ command }) => ({
base: command === 'serve' ? '' : '/build/',
outDir: 'public/build',
publicDir: 'fake_dir_so_nothing_gets_copied',
build: {
manifest: true,
rollupOptions: {
input: 'resources/js/app.js',
},
},
plugins: [
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
}
],
});

Vite with Laravel