Tsparticles: Support for Vue 3

[daviddesmet]

Is your feature request related to a problem? Please describe.
Would like to have Vue 3 supported now that is stable. I could create a PR if you want.
https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Describe the solution you'd like
Support Vue 3.

Describe alternatives you've considered
Tweaked the original to support Vue 3:

<template>
  <div :id="id"></div>
</template>

<script lang="ts">
import { nextTick } from "vue";
import { props, mixins } from "vue-class-component";
import { tsParticles } from "tsparticles";
import { Container } from "tsparticles/dist/Core/Container";
import { RecursivePartial } from "tsparticles/dist/Types/RecursivePartial";
import { IOptions } from "tsparticles/dist/Options/Interfaces/IOptions";

const Props = props({
  id: {
    type: String,
    required: true
  },
  options: {
    type: Object as () => RecursivePartial<IOptions>
  }
});

export default class Particles extends mixins(Props) {
  private particlesContainer?: Container;
  mounted(): void {
    nextTick(() => {
      if (!this.id) {
        throw new Error("Prop 'id' is required!");
      }
      tsParticles.load(this.id, this.options ?? {}).then((container) => (this.particlesContainer = container));
    });
  }
  beforeDestroy(): void {
    this.particlesContainer?.destroy();
  }
}
</script>

Additional context
From their documentation, A Note for Plugin Authors:
https://v3.vuejs.org/guide/migration/global-api.html#a-note-for-plugin-authors

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.96. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

Feel free to open a PR, I didn’t approach Vue 3 for now.

They told me it has breaking changes for Vue 2 and I want to keep this compatibility too. This will probably require a new component if it have breaking changes

[matteobruni]

I created a vue3 branch if you want to have a look.
I tested it and it works in the demo app.
The PR opened is #850

[daviddesmet]

@matteobruni

That was pretty fast!
Only thing I see on the code is the way nextTick is called. Please take a look at here for detailed info.

[matteobruni]

Nice catch, thanks for that!! I'll update it now!

[daviddesmet]

No problem, I'm glad to help! Everything that's needed to make the library even better 😊