Vite hot reload not working with Vue components in Laravel Sail Docker setup

Other Questions NPM
1

I’m encountering an issue with Vite’s hot module replacement while working with Vue files in my Laravel application. The auto-refresh feature seems to function correctly only when I run the development server from the Windows command line, but it fails to work when I try it from WSL or the Docker terminal.

My setup includes:

  • Laravel 11 with Inertia and Vue 3
  • Operating on a Windows system using WSL2
  • Running Laravel Sail inside Docker
  • Editing the Vue files using VS Code on the Windows host

Here’s the problem:
When I initiate the development server via npm run dev from different terminals, the results vary:

From the WSL terminal: The server launches on port 5173, but any changes made to Vue files need a manual restart to reflect those updates.

From the Docker terminal: I experience the same issue—hot reload fails to recognize changes in Vue files.

From Windows PowerShell: Everything works flawlessly—all changes in the Vue components are automatically reflected in the browser.

Despite all three methods hosting the application on the same port, I’m puzzled as to why file watching behaves differently. I’ve also observed that starting Vite from WSL and Docker terminals is considerably slower (approximately three times longer).

Has anyone else faced similar problems regarding file watching in different environments? What might be causing this inconsistency with hot module replacement?

2

Classic file system issue with cross-platform development. Your file watchers can’t handle events properly between Windows, WSL, and Docker. When you edit files in VS Code on Windows, the change events have to go through multiple layers before reaching your container.

I had the same problem and fixed it by making Vite use polling instead of native file watching. Add this to your vite.config.js:

server: {
    watch: {
        usePolling: true,
        interval: 300
    }
}

The slow startup you’re seeing? That’s the same cross-platform overhead. Polling uses a bit more resources but works consistently everywhere. Also double-check your Docker volume mounts for node_modules and source directories.

3

This is a filesystem event propagation issue between your Windows host and the container. PowerShell works because npm runs directly on Windows where VS Code makes changes - no translation needed.

I’ve hit this exact problem. Beyond enabling polling, check your Docker bind mounts in docker-compose.yml. Make sure the volume mapping for source files is correct. File change events often get lost when translating between Windows NTFS and the Linux container.

Also check your WSL integration settings. If you’re using Docker Desktop, enable WSL integration for your specific distribution.

The performance hit is normal - there’s overhead when Docker bridges Windows and Linux filesystems. Try setting the host option to 0.0.0.0 in your Vite config too. This ensures proper network binding across environments.

4

Yeah, that’s definitely a Docker volume issue. Had the same headaches with my Laravel Sail setup. Try adding CHOKIDAR_USEPOLLING=true to your .env file first - it’s usually easier than messing with the Vite config. Also make sure you’re running npm inside the container, not directly from WSL. That causes weird permission issues.