Point Vite HMR at localhost under Sail

Sail on WSL2 needs the HMR host set to localhost. Do not remove the kit's Vite plugins to add that block.

1 min read

For your AI agent

Copies a prompt. Paste it into the AI agent you already have open.

Read https://laravel-vuejs.space/vite-hmr-sail-hostname.md
Sail on WSL2 needs the HMR host set to localhost. Do not remove the kit's Vite plugins to add that block.
Do not remove the kit's Vite plugins to add that block.
Do not set the HMR host to a hostname that only resolves inside the container.
Do not delete public/hot by hand while the dev server is running and expect it to stay gone.
Show the diff. Do not commit.
On this page · 3 sections
  1. The fix
  2. What to avoid
  3. FAQ

People searching “Vite HMR Sail” see the page and no updates when they save a Vue file. The browser on the host cannot reach the dev server’s advertised host inside Docker. The Sail guide already has this block. The Vite guide is the asset URL. This page is the hostname.

TL;DR

  • Sail on WSL2 needs the HMR host set to localhost.
  • Do not remove the kit’s Vite plugins to add that block.
  • Do not set the HMR host to a hostname that only resolves inside the container.
  • Do not delete public/hot by hand while the dev server is running and expect it to stay gone.

Who it's for: Laravel + Vue developers

Applies to: Laravel 13 · Vue 3

The fix#

javascript
server: {
  hmr: {
    host: "localhost",
  },
},

Put it on the existing defineConfig. Leave the Laravel, Vue, and Tailwind plugins the kit generated. Restart ./vendor/bin/sail npm run dev.

public/hot appears while that process is running. It must not be deployed. The deploy guide covers that file.

What to avoid#

Gotcha

Do not set the HMR host to a hostname that only resolves inside the container. The browser is the thing opening the socket. Do not delete public/hot by hand while the dev server is running and expect it to stay gone. The server writes it back.

FAQ#

How do I point Vite HMR at localhost under Sail?

Sail on WSL2 needs the HMR host set to localhost. Do not remove the kit's Vite plugins to add that block.

What goes wrong with Vite HMR Sail?

Many developers see the page and no updates when they save a Vue file. Do not set the HMR host to a hostname that only resolves inside the container.

Found this useful?

Ask questions, share what you built.

Join thousands of Laravel and Vue developers in our Facebook group, or get new posts in your Telegram feed. Sharing this article helps too.

Join the Facebook group Follow on Telegram

Keep reading

Newsletter

Get the best of Laravel & Vue, once a month.

One short email with new guides, release notes worth reading and hand-picked community links. No spam, unsubscribe any time.

RSS feed Telegram channel