DEV Community

Cover image for [Vue.js] How to create beautiful and realistic confetti animations using tsParticles
Matteo Bruni for tsParticles

Posted on • Edited on

7 3

[Vue.js] How to create beautiful and realistic confetti animations using tsParticles

I wrote a post about tsParticles and the new confetti animation created in the 1.30 version.

This configuration can be used as is in any Vue.js 2.x tsParticles installation (particles.vue package).

app.js

import Particles from "particles.vue";

Vue.use(Particles);
Enter fullscreen mode Exit fullscreen mode

home.vue

<!-- this component can be placed anywhere -->
<Particles :options="/* paste options here, remember to replace double quotes with single quotes */" />
Enter fullscreen mode Exit fullscreen mode

A working sample can be found below

GitHub logo tsparticles / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Explore this insightful post in the vibrant DEV Community. Developers from all walks of life are invited to contribute and elevate our shared know-how.

A simple "thank you" could lift spirits—leave your kudos in the comments!

On DEV, passing on wisdom paves our way and unites us. Enjoyed this piece? A brief note of thanks to the writer goes a long way.

Okay