How to determine whether Vue component is destroyed due to hot reload?

Question

I have a Vue component that manages heavy resources that are expensive to set up (namely, WebRTC PeerConnection with video streams). The component is designed in a way so these heavy resources are saved elsewhere and are preserved across module reloads. When component is reloaded (destroyed & created again) it checks for saved stream and just redeploys it without recreation.

This, however, implies that destroyed hook actualy does not destroy anything. Which is not expected behavior when user leaves the page and component is destroyed completely, not for reloading.

So the question is: how to tell whether the component is destroyed to be reloaded (and resources should be left intact) or because it is no longer needed (and resources should be closed)?

I use Nuxt, so webpack configuration and other low-level related things are managed by Nuxt itself. No changes to Nuxt config were made in this area.

Answer 1

In complete honesty, I still don't have quite clear your issue.

Although it could come in handy for you knowing about this.

    if (module.hot) {
      module.hot.addStatusHandler(status => {
        if (status === 'idle') {
             // do code here
        }
      })
    }