webpack vue cli clear browser console on reload

Question

using the vue-cli-service which uses webpack under the hood, is there a way to set things up so on hot reload the browsers console is cleared?

It is not very efficient to constantly see old messages in the console log that are not relevant to the current state of the app on last save.

Answer 1

Simple keep clearing the console every time a hot reload happen by adding this to the main.js file

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

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

main.js file now would be

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

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

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