Confetti Animation Effect In Vue.js

A Vue component for creating a confetti animation effect on the web app.

Usage:

Import the component.

import Vue from 'vue'
import VueConfetti from 'vue-confetti'

Use this component.

<template>
  <main>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
  </main>
</template>

Vue.use(VueConfetti)

export default {
  methods: {
    start () {
      this.$confetti.start()
    },

    stop () {
      this.$confetti.stop()
    }
  }
}

Preview:

Changelog:

02/11/2022

• v2.3.0: reuse the default canvas; add Vue 3 support

07/24/2021

• v2.2.2: update

09/12/2020

• v2.2.1: update

09/06/2020

• v2.2.0: add option for setting max wind speed

09/05/2020

• v2.1.1: Bug Fixes

08/29/2020

• v2.0.11

07/13/2020

• v2.0.9

Download Details:

Author: alexandermendes

Live Demo: https://github.com/alexandermendes/vue-confetti

Download Link: https://github.com/alexandermendes/vue-confetti/archive/master.zip

Official Website: https://github.com/alexandermendes/vue-confetti

Install & Download:

# NPM
$ npm install vue-confetti --save