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

HighLiuk's avatar

Vite Hot Reload and Laravel Homestead

I have a fresh Laravel 9 installation with Vite.

I use Laravel Homestead as a development environment (on top of a Windows 10 OS).

However, I cannot manage to make them work together: once I run npm run dev, it always reloads the page every time I save my blade files. No hot reload, no state preserved. The page is refreshed as if I did ctrl + R.

I've tried different solutions on the web for similar cases, which involved updating vite.config.js, but none of them worked.

This is my Homestead.yaml

---
ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox
ssl: true

authorize: C:\Users\Luca\.ssh\id_rsa.pub

keys:
    - C:\Users\Luca\.ssh\id_rsa

folders:
    - map: C:\Users\Luca\www\playground
      to: /home/vagrant/playground

sites:
    - map: playground.test
      to: /home/vagrant/playground/public
      php: "8.1"

databases:
    - playground

features:
    - mysql: true
    - mariadb: false
    - postgresql: false
    - ohmyzsh: false
    - webdriver: true

then my hosts file

192.168.10.10	playground.test

and my vite.config.js

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

export default defineConfig({
  server: {
    hmr: {
      host: "192.168.10.10",
    },
    host: "192.168.10.10",
    watch: {
      usePolling: true,
    },
  },
  plugins: [laravel(["resources/css/app.css", "resources/js/app.js"])],
})

P.S.: I guess it is not related to it, but I use Blade & Tailwind. No Vue / React etc.

0 likes
3 replies
Firemaps's avatar

I am having the same issue. Does anyone know what to do about it?

Idearia's avatar
Idearia
Best Answer
Level 2

I think that's not something related to Homestead. If you hit save on a blade file, it should be compiled again to PHP and then rendered on the server to make the HTML document the browser displays.

These steps need to happen on the server, so a full page refresh is the best you can have.

In order to benefit from HMR you should use a JS framework live Vue or React, which can be directly updated on the browser since the rendering can happen client-side.

2 likes
entoniperez's avatar

I had the same error and a CORS errors, and I add this server.cors value:

server: {
    hmr: {
        host: "192.168.56.56",
    },
    // added
    cors: {
        origin: '*',
    },
    host: "192.168.56.56",
    watch: {
        usePolling: true,
    },
},
1 like

Please or to participate in this conversation.