Events are emitted continuously after instantiation of the vue-typed-js component and navigating away (possible leak scenario)

[pratyushtewari]

I am nost sure if this is an issue of default behavior of vue/nuxt

I am using vue-typed-js on one of the pages in my nuxt website, and even when I navigate away from the page where I used this component, I see a lot of events continuously emitted by this package. Is that suppose to happen?

These events were being emitted even when I only opened the home page.

My setup is as follows:

I added a file calledplugins/vue-typed-js.js

import Vue from 'vue';
import VueTypedJs from 'vue-typed-js';

Vue.use(VueTypedJs);

and in nuxt.config.js file I have

plugins: [
  {src: '@/plugins/vue-typed-js.js'},
]

I have this component being used in a page deep inside the route http://localhost:3000/projects/testProject and I can see the events even when I open the index.html at the root http://localhost:3000/ after I have opened the project page.

Is there any special way to destroy the component after navigating away?

[pratyushtewari]

it feels like the teardown is not happening.

Even if I call destroy in the parent element, the events are still emitting. in parent I called

  beforeDestroy() {
      console.log("destroying vue-typed-js");
      this.$children[0].$destroy();
  },

I checked the there was only 1 child component in this parent and it was vue-typed-js.

[isaacjoy]

I'm also having problems with events being fired properly using nuxt: https://github.com/Orlandster/vue-typed-js/issues/31

[jzstern]

Not using nuxt but observing the same problem.

Events are firing as if a <vue-typed-js> component exists, when really I'm destroying the element by passing a falsey value into the v-if. I've also tried wrapping the <vue-typed-js> component in a <div>, but I still see the same events fire.

I love this library & use typed.js quite a bit, but it's causing a lot of unnecessary events :P