Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TheDude's avatar

Vite hot reload for blade files

I'm working on a Vue/Inertia backend (via app.blade.php) and a plain blade front end (rest of files in resources/views alone with app.blade.php).

Hot reloading works for the vue backend, but how can I get it to work for blade files when I make an update to a javascript file and it auto-reloads. Currently I have to go to the browsers cache, delete the js in the cache and then manual refresh.

//vite.config.js
export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
0 likes
3 replies
Sinnbeck's avatar

Doesn't the page reload on save? What sort of Javascript is used on the blade pages?

TheDude's avatar

@Sinnbeck Javascript is nothing fancy, just plain script tags. I added

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

the result of adding resources/views/*.php seems to be when I refresh the page manually, javascript is freshly pulled in.

Vite works (I assume) in app.blade.js because of

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

should I put this in the blade templates? If so, what exactly should I write in @vite?

Sinnbeck's avatar

@the-dude Ok 2 things.

This array, is an array of input javascript and css files. Vite cannot compile php, so no need to pass it in

  input: ['resources/js/app.js', 'resources/views/*.php'],

If you meant to tell it which files to reload on, you pass those to refresh

refresh: ['resources/views/*.php']

But I would recommend just leaving it at true as laravel already has this set up

Secondly.

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

I assume this is for the inerita page? But I thought we were talking about other pages that app.blade.php? What do you have in those (In the layout I assume)

1 like

Please or to participate in this conversation.