vue-confetti

vue-confetti

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

View the demo

Installation

npm install vue-confetti --save

Usage

<template>
  <main>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="love">Show some love</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();
      }

      love() {
        this.$confetti.update({
          shape: 'heart',
          colors: [
            'red',
            'pink',
            '#ba0000'
          ],
        });
      }
    }
  }
</script>

Configuration

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

Property	Type	Description	Default
shape	String	The shape of the confetti ('circle', 'rect', 'heart' or 'image').	'circle'
size	Number	The size of the particles (should be a positive number).	10
dropRate	Number	The speed at which the particles fall.	10
colors	Array	The confetti colors.	['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
image	string	The path to a custom image or SVG to use as the particle. Note that shape must be set to image.	null

Examples

Red and pink hearts:

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

Custom image:

$confetti.start({
  shape: 'image',
  image: 'http://placekitten.com/50/50',
});

Development

The following scripts are available for local development:

# test
npm run test

# run with webpack watch
npm run dev

# build for production
npm run build

# serve the demo page (watch for changes from another terminal)
npm run demo

Note that vue-confetti enforces conventional commits to help automate the release process. Whenever code is merged into master the next semantic version number is automatically determined, a changelog generated and the release published.