VueJs confetti example

[anil1712]

Thanks, for this great library, but I want to trigger the animation on button click only, but did not get any solution for that related to VueJs

Here are the reference links but I don't know to integrate them in VueJs code, so please help me
https://codepen.io/matteobruni/pen/zYwYEgg

This one exactly I wanted to create using tsparticles, but unable to integrate it
https://codepen.io/anil1712/pen/LYLXWdj

[matteobruni]

https://codesandbox.io/s/infallible-joliot-9znu5?file=/src/App.vue

Here's the Vue.js 2.x sample, it works also in Vue.js 3.x in the same way.

You cannot use the Vue.js component when you want to trigger particles on some event, but you can still use the core library like in standard javascript.

[anil1712]

@matteobruni Thanks for the reply, It is now working with my VueJs app, but the effect should target the button. Right now it is coming somewhere in the center. Please have a look at the below link.

https://codepen.io/anil1712/pen/LYLXWdj

Also, how do we add an image as a shape?

[matteobruni]

I've updated the sample with the right position. About images you can see this sample: https://codepen.io/matteobruni/pen/bGdomGq

[anil1712]

@matteobruni Can you please update the solution with image also, I tried but did not get succeeded, I got confused because one example is using "shapes" as a string array and another one is having "shape" as an object.

[matteobruni]

I've updated the sample, using the standard syntax. I didn't notice the issue with images in the confetti method.

[anil1712]

Thanks for your support