Vue-cli: HMR loading indicator

[Herteby]

What problem does this feature solve?

Unless I'm monitoring the terminal, I often find myself wondering wether my latest changes have gone to the browser yet. Since you're now showing error messages in the browser view, I think it'd be nice to take the opportunity to also add an indicator which shows you when the HMR process is done.

What does the proposed API look like?

I see two alternatives:

If it's possible to send a message to the browser before compilation starts, you could display a "Reloading module..." message, which disappears when the process is done.

If the browser only recieves notice after compilation is done, you could display a "Module reloaded" message, which immediately starts fading away. I've already made a component like this myself actually, using the module.hot.addStatusHander hook.

[LinusBorg]

Idea: That could be done as plugin, which adds some code to the webpack entry-point through chainWebpack or configurewebpack if NODE_ENV === 'development'.

If we wanted to get fancy, we could send back a ping to the dev server (, i.e. to a path like /___hotreload_done for which we would listen through a hook on devServer.before) and show a native notification with node-notifier.

[dhensche]

I'm not a webpack guru by any means, but when perusing the DevServer documentation I figured out that you can go to http://localhost:8080/webpack-dev-server/ which has a little hot loader bar at the top that shows the HMR status

[Herteby]

@LinusBorg The problem with native notifications though is that they could easily get annoying (if they play a sound, or don't disappear fast enough), and they might not show up on the same screen as you have the browser.

Here's a demo of my script btw: https://codesandbox.io/s/94rz54rv6o
(Turns out it works on codesandbox too)

Clearing the console after reload is a pretty nice behavior btw. Then you know that any errors/messages in the console are always from the latest version.

[LinusBorg]

Nice litte script. could very well be done as a cli plugin.

[Herteby]

@LinusBorg I might try that out 🙂
Hmm, do you have any pointers on how to get a cli plugin to inject code into the client? Most existing plugins just add files and webpack configs.