Laravel: hot-reload Blade templates with Vite

July 17, 2022  ‐ 1 min read

Since the release of version 0.3 of the Laravel vite-plugin Vite can do a full page reload after changes to a Blade template are made.

So first things first, make sure that you upgrade to the right or last version of the vite-plugin.

Second, add refresh: true to the configuration of the laravel plugin in the vite.config.js file.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
});

Last but not least, try it out by running npm run dev.