I’m working on a Laravel project and using Vite instead of Laravel Mix for my asset compilation. I use the Herd app to create new Laravel projects, which typically sets up a domain with a .test extension (e.g., myproject.test).
The problem I’m facing is that when I run npm run dev, changes are not reflected in the browser. It seems like Vite is not properly updating the project. Here are the steps I’ve taken and my current configuration:
-
Installed Vite and Laravel Vite Plugin:
npm install --save-dev vite laravel-vite-plugin -
vite.config.js:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js', 'resources/css/app.css'], refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], server: { host: 'myproject.test', watch: { usePolling: true, }, }, }); -
.env:
APP_URL=http://myproject.test -
Blade Template:
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Vite</title> @vite(['resources/js/app.js', 'resources/css/app.css']) </head> <body> <div id="app"></div> </body> </html> -
Commands:
npm run dev
Despite these configurations, changes in the JavaScript and CSS files do not reflect in the browser. I’ve tried restarting Herd and clearing the browser cache, but the issue persists.
Additional Details:
- Laravel Version: 11
- Herd Version: 1.9.1
Any help on resolving this issue would be greatly appreciated. Thank you!