Oh Dear is the all-in-one monitoring tool for your entire website. We monitor uptime, SSL certificates, broken links, scheduled tasks and more. You'll get a notifications for us when something's wrong. All that paired with a developer friendly API and kick-ass documentation. O, and you'll also be able to create a public status page under a minute. Start monitoring using our free trial now.

Using Laravel Vite to automatically refresh your browser when changing a Blade file

Original – by Freek Van der Herten – 2 minute read

Yesterday, the Laravel team released the vite-plugin. Going forward, Vite will become the standard build tool for Laravel apps.

One of the cool features of this Vite integration is that you'll get hot reloading by default. Whenever you run Vite with npm dev and modify a JS or CSS file, Vite will automatically recompile the assets and refresh your browser. This way, you won't have to refresh your browser manually after making a change.

Wouldn't it be cool if this automatic refresh would work when we're changing a Blade file?

Well, by adding this little piece of configuration to vite.config.js, you can get that.

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
       {
           name: 'blade',
           handleHotUpdate({ file, server }) {
               if (file.endsWith('.blade.php')) {
                   server.ws.send({
                       type: 'full-reload',
                       path: '*',
                   });
               }
           },
       }
    ],
})

With this configuration in place, when you now run npm dev, and change a Blade file, your browser will refresh.

Here's a little demo. Note that nowhere in this demo I'm leaving the IDE. The browser refreshes automatically when I safe the Blade file.

reload gif

I hope that, at some point in time, this feature will be baked in the Laravel's vite-plugin.

Want to know some more about Vite? Head over to this blog post on how to make Valet and Vite play nice together.

UPDATE: Laravel's Vite plugin now offers a native way to handle hot reloads.

Stay up to date with all things Laravel, PHP, and JavaScript.

Follow me on Twitter. I regularly tweet out programming tips, and what I myself have learned in ongoing projects.

Every month I send out a newsletter containing lots of interesting stuff for the modern PHP developer.

Expect quick tips & tricks, interesting tutorials, opinions and packages. Because I work with Laravel every day there is an emphasis on that framework.

Rest assured that I will only use your email address to send you the newsletter and will not use it for any other purposes.

Comments

avatar

Great article. I didn't even consider this was possible. Going to give it a try in my app!

Also, noticed you've got a typo in the second paragraph, "nom dev" :-)

👍 1
avatar

Thanks! Fixed the typo.

avatar

Thanks for sharing, although I don't need it yet, I know it's a good investment to implement it now. My future self will thank you.

Comments powered by Laravel Comments
Want to join the conversation? Log in or create an account to post a comment.