Vite Hot Reload and Laravel Homestead-CodePudding

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({
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: true,
    }),
  ],
  server: {
    host: "192.168.10.10",
    watch: {
      usePolling: true,
    },
  },
})

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

CodePudding user response：

From documentation:

When your application is built using traditional server-side rendering with Blade, Vite can improve your development workflow by automatically refreshing the browser when you make changes to view files in your application. To get started, you can simply specify the refresh option as true.

https://laravel.com/docs/9.x/vite#working-with-blade-and-routes