How can set up my Vue.js site to clear the browser's Javascript console on every hot reload event?

Question

I have a Vue.js site with Webpack Dev Middleware (served via an ASP.NET Core site by HTTP.sys web server, though I'm guessing that doesn't matter). Does anyone know how I can set up my site to clear the browser's Javascript console on every hot reload event?

Here's the only related link I can find, but it seems to be for a web server I am not using. I'm not sure why the particular web server would matter.

Answer 1

In my main app .js file:

if (module.hot) {
    module.hot.accept() // already had this init code 

    module.hot.addStatusHandler(status => {
        if (status === 'prepare') console.clear()
    })
}

That got it to work consistently for me.

See also https://webpack.js.org/api/hot-module-replacement/#addstatushandler .