🎉 A Vue component for dropping confetti 🎉
npm install vue-confetti --save
<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>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', or 'heart'). |
'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'] |
$confetti.start({
shape: 'heart',
colors: [
'red',
'pink',
'#ba0000',
],
});The following scripts are available for local development:
# test
npm run test
# run with webpack watch
npm run dev
# build for production
npm run buildNote 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.