vuefetti v1.0.0

VueFetti

This is a port of the React dom-confetti by Daniel Lundin for Vue 2.

Usage

Import, register component and set options

import Vue from 'vue';
import VueFetti from 'vuefetti';

export default {
    ...
    components: {
        VueFetti
    },
    ...
    data() {
        return {
            options: {
                angle: 90,
                spread: 360,
                startVelocity: 40,
                elementCount: 70,
                dragFriction: 0.12,
                duration: 3000,
                stagger: 3,
                width: "10px",
                height: "10px",
                perspective: "500px",
                colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
            },
            visible: Vue.observable(false)
        };
    },
    ...
}

Add a method to toggle confetti:

methods: {
    async explode() {
      this.visible = false;
      await Vue.nextTick();
      this.visible = true;
    },
},

Add to your template

<div>
  <VueFetti v-if="visible" :options="options"></VueFetti>
  <button @click="explode">Go time</button>
</div>