Home

I’ve been trying to port my vue.js application to nuxt.js for a few days now and I’ve got to be honest, I’ve ran into a lot of problems so far. Problems that never happened when my website was a normal vue.js app.

So, right now I’ve ran into another problem. I’ll try to explain.

When I load my website, it loads in a VideoPlayer component that I’ve made my self, the video player works perfectly fine, when I was using it with my normal vue.js app there were no bugs and also the many unit tests I’ve wrote for the player all pass as well.

Now this video player that I made, for some reason gets generated twice on page loads. The first time that it generated the video player, it gets put into the DOM (I think) but right after it, it gets replaced with a new video player instance.

Now the problem is this, when the first video player gets removed, all of the events are still attached and it still tries to load the video. Even though the video player isn’t in the DOM anymore, the video still gets played in the background.

What ends up happening is that we end up with two videos playing at the same time, one in background and one from the actual player.

@manniL and I are very confused about this problem, we’ve been trying to debug it for a few days but we’re getting no where with it.

I have a feeling that its something to do with how nuxt.js handles the recycling of components. I’ve done some debugging and saw that the component gets remounted many times, and so does the page component as well. When it gets remounted, I believe it doesn’t destroy the video player properly and still leave the video element running background + the events.

Nuxt.js shouldn’t be creating new instances of the elements on the page, what it should be doing is recycle the elements it already has there. Otherwise you end up with 5 different video elements running background, all that have the same video cached in background as well. That’s a lot of memory used for no reason.

There’s no special event that tells me that the DOM is finally done generating and that it won’t be generated again so I can’t listen for any of the Vue lifecycle, Vue Router or nuxt events to control that either.

no-ssr isn’t option either, I’ve been spending a lot of time trying to implement it using no-ssr and that just creates more bugs then it removes.

There’s a similar issue over here as well, the fix for it was really hacky and its not appropriate solution I believe since older video objects remain in background. https://github.com/nuxt/nuxt.js/issues/2391