Clearing console on Nuxt hot reload?

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!

Marcello B. · Accepted Answer · 2021-07-29T21:40:15.643

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' }
]

edited Jul 29 '21 at 21:40

answered Jul 29 '21 at 16:26

Marcello B.

4,177
11
45
65

1

Thank you for the reply above. That is exactly what i tried, and the console still shows the logs from the previous "session". I know the code you posted is working because I put a console log in the file before the window.addEventListener and I see it. – Rezzy Jul 29 '21 at 20:51
Please double check that you do not have preserve log enabled in your devtools https://imgur.com/a/UGD5D30, you can also run `console.clear()` directly in the console. Please let me know if it clears the log. – Marcello B. Jul 29 '21 at 20:57
I can confirm that the "preserve log" is disabled/unticked. Running "console.clear()" directly in the console works fine. When i save a file and Nuxt hot-reloads, the console logs I have to test the onReload.js file are not appearing. It seems the onReload.js is only executing if I press browser refresh.. ? – Rezzy Jul 29 '21 at 21:13
1

After a bunch of hacking and inspecting. I found that `window.__whmEventSourceWrapper` is what webpack uses to produce the `[HMR]` messages. I have updated my answer to reflect this. This has been tested and has proven to work in my case – Marcello B. Jul 29 '21 at 21:42
Wow that's awesome, really nice find there! I didn't even think about that or come across it while looking around. Thanks a ton!! – Rezzy Jul 30 '21 at 08:31

score 0 · Answer 2 · edited Aug 25 '21 at 11:23

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.

Clearing console on Nuxt hot reload?

2 Answers2

Linked