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	Default
colors	Array	The confetti colors.	['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
shape	String	The shape of the confetti ('circle', 'rect', or 'heart').	'circle'

Example

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