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

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 .

your link contains the response for your question. Just add in your main.js file:

window.addEventListener('message', (e) => {  if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {    console.log('hot reload happened')    console.clear()  }})

Example of a complete main.js file:

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({  router,  store,  render: h => h(App)}).$mount('#app')window.addEventListener('message', (e) => {  if (e.data && typeof e.data === 'string' && e.data.match(/webpackHotUpdate/)) {    console.log('hot reload happened')    console.clear()  }})

EDIT: I didn't read your answers to the github issue. Could you provide some kind of JSON.stringify(e) on your event message on multiple events so we can check what you have?