Vite with Laravel: Auto-refresh Blade views

22 Mar 2021

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: '*',
                    });
                }
            },
        }
    ],
});