Clearing console on Nuxt hot reload? - vue.js

Question

In Vue I just edited the main.js file to add:
// on hot-reload clear the console
window.addEventListener("message", (e) => {
if (e.data && typeof e.data === "string" && e.data.match(/webpackHotUpdate/)) {
console.clear();
}
});
But in Nuxt you only have the config file. I tried adding that script to the plugins folder but the console never cleared.
onReload.js in plugins folder. This file only seems to run when I refresh the page manually but not on hot reload (i.e. when I save any file):
console.log("hello there");
window.addEventListener("message", (e) => {
console.log("e.data is > ", e.data);
console.log("=== string > ", typeof e.data === "string");
console.log("does it match > ", e.data.match(/webpackHotUpdate/));
if (e.data && typeof e.data === "string" && e.data.match(/webpackHotUpdate/)) {
console.log("hello world");
console.clear();
}
});
Nuxt config file:
plugins: [{ mode: "client", src: "~/plugins/onReload" }],
Any ideas are appreciated!

Answer 1

You will need to add a plugin.
/plugins/onReload.js would contain your function:
Object.keys(window.__whmEventSourceWrapper).forEach((key) => {
window.__whmEventSourceWrapper[key].addMessageListener((e) => {
if (e.data.match(/built/)) {
console.clear()
}
})
})
Then in nuxt.config.js you would need to import the plugin, and disable server side rendering
plugins: [
{ mode: client, src: '~/plugins/onReload' }
]

Answer 2

The accepted answer didn't work for me so I ended up creating clear-console.client.js with the following...
export default () => {
if (module.hot) {
module.hot.accept() // already had this init code
module.hot.addStatusHandler((status) => {
if (status === 'prepare') console.clear()
})
}
}
Then in nuxt.config.js add the follwing plugins: ['~/plugins/clear-console.client.js']
Hope this helps others.