vue-confetti v2.3.0

vue-confetti

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

View the demo

Installation

yarn add vue-confetti

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({
          particles: [
            {
              type: 'heart',
            },
            {
              type: 'circle',
            },
          ],
          defaultColors: [
            'red',
            'pink',
            '#ba0000'
          ],
        });
      }
    }
  }
</script>

Usage with Nuxt

As this plugin relies on browser globals, such as window, it will not work when server-side rendered. The following example shows how to get this to add as a client-side only plugin with Nuxt.

Register vue-confetti in your Nuxt plugins folder (e.g. at your-repo/plugins/vue-confetti):

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

Vue.use(VueConfetti);

Register the plugin in your Nuxt config:

export default {
  plugins: [
    { src: '~/plugins/vue-confetti.js', mode: 'client' },
  ],
};

Configuration

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

The following options can be passed to each item in particles:

Examples

Red and pink hearts:

$confetti.start({
  particles: [
    {
      type: 'heart',
    }
  ],
  defaultColors: [
    'red',
    'pink',
    '#ba0000',
  ],
});

Custom image:

$confetti.start({
  particles: [
    {
      type: 'image',
      url: 'http://placekitten.com/50/50',
    },
  ],
});

Custom canvas:

By id:

$confetti.start({
  canvasId: 'my-custom-canvas',
});

By element reference:

$confetti.start({
  canvasElement: document.getElementById('my-custom-canvas'),
});

Less particles per frame:

$confetti.start({
  particlesPerFrame: 0.25,
});

Multiple particle types:

$confetti.start({
  particles: [
    {
      type: 'heart',
      colors: [
        'red',
        'pink',
      ],
    },
    {
      type: 'circle',
      colors: [
        '#ba0000',
      ],
    },
    {
      type: 'image',
      size: 15,
      url: 'http://example.org/my-icon.svg',
    },
  ],
  defaultDropRate: 5,
  defaultSize: 5,
});

Development

The following scripts are available for local development:

# test
yarn run test

# run with webpack watch
yarn run dev

# build for production
yarn run build

# serve the demo page (watch for changes from another terminal)
yarn 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.