vue-confetti

vue-confetti

:tada: A Vue component for dropping confetti :tada:

Installation

npm install vue-confetti --save

Usage

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

<script>
  import Vue from 'vue'
  import VueConfetti from 'vue-confetti'

  Vue.use(VueConfetti)

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

      stop () {
        this.$confetti.stop()
      }
    }
  }
</script>

Configuration

The following options can be passed to $confetti.start():

Property	type	description
colors	Array	The confetti colors.
shape	String	The shape of the confetti ('circle', 'rect', or 'heart').

Example

$confetti.start({
  shape: 'heart',
  colors: ['red', 'pink', '#ba0000']
})