FAQ

These are some frequently asked questions about the nuxt-particles module.

Why not use @tsparticles/vue3?

The @tsparticles/vue3 package is the first-party Vue 3 wrapper around the tsParticles library, but it has some flaws.

The tsParticles library modifies the global scope upon initialization; it is not done on a per-component basis. Therefore, loading the provided component multiple times will cause a "flash" on all existing particle containers without complicated workarounds. This is an antipattern to Vue's isolated, component-based paradigm, and is therefore not ideal.

The component provided by this module solves this by keeping track of whether the library is initialized on a global level. If it has already been initialized, any subsequent component instances will not attempt to reload it. This is made possible using Nuxt's built-in useState composable.

Should I enable lazy-loading?

In the vast majority of cases, yes. The nuxt-particles module will automatically lazy-load the tsParticles library when the <NuxtParticles> component is rendered. As such, the library will not be loaded until it is needed, which can significantly improve your application's performance. Disabling this feature is not recommended unless you have a specific reason to do so.