It don't work with router

[Nelie-Taylor]

Hello!
The first i thank you so much to coder Creotip
I have a issue:
It not work with vue router
Please view video to understand more...
https://www.youtube.com/watch?v=zzbFhnatQoo

My code
<vue-particles color="#ffffff" :particleOpacity="2" :particlesNumber="35" shapeType="circle" :particleSize="1" linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.6" :linesDistance="150" :moveSpeed="4" :hoverEffect="true" hoverMode="grab" > </vue-particles>

Thank you so much

[tomjnsn]

I can't see the video but I'm assuming the issue is the same that I ran into: vue-particles doesn't destroy the instance when you move away from the page so the load on the CPU remains.

I don't want to tell people not to use this because it is really simple to plugin to a page, set the parameters you want and you're good to go, but since this issue is over 7 months old and no comment and the project hasn't been updated in 6 months I don't think I'm detracting too much to make the following suggestion.

Use particles.js and in the page that you want to use the particles background in just do the following:

require('particles.js/particles.js');

export default {
  mounted() {
    particlesJS('particles-js', {
        // configuration goes here
    });
  },
  beforeDestroy() {
    window.pJSDom[0].pJS.fn.vendors.destroypJS();
    window["pJSDom"] = [];
  }
}

Just set the'particles-js' argument to whatever the id is of the html element you want to put the particles on.

Note: the code assumes you're only going to have one instance on your page. You should be able to call particlesJS() multiple times in the mounted() function and just need to loop through the window.pJSDom array and call that same function on all items in the array before resetting the array to an empty array.