[Bug]: particles.vue3 slow down with vue-router

[bkawakami]

Contact Details

bru.kawakami@gmail.com

What happened?

I just start a default project with Vue 3 + Router and then add a Particle on my default HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
  <Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesConfig" />
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

import { loadTrianglesPreset } from "tsparticles-preset-triangles"

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  methods: {
    particlesInit: async function(engine) {
      await loadTrianglesPreset(engine)
    },
  },
  data() {
    return {
      particlesConfig: {
        preset: "triangles",
        fpsLimit: 60,
        detectRetina: false
      }
    }
  }
}
</script>

<style>
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: -10;
}
</style>

But when I peform a simple action, such as change page in top menu on Vue default router, when I come back to home de particles are slow and lagged.

Someone experienced this?

tsParticles Version

2.1.3

Which library are you using?

Vue.js 3.x (particles.vue3)

tsParticles Configuration

{
        preset: "triangles",
        fpsLimit: 60,
        detectRetina: false
      }

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[matteobruni]

Thanks for the report, I thought this kind of issue was already solved in 2.1.0, but I didn't notice there was still a bug about it. The first report was #4031, but it'll be fixed in v2.2.0 (PR #4341).