https://github.com/rjp2525/vuefetti
Confetti Vue component for your app
https://github.com/rjp2525/vuefetti
animation-effects component confetti vue vue2 vuejs
Last synced: 7 months ago
JSON representation
Confetti Vue component for your app
- Host: GitHub
- URL: https://github.com/rjp2525/vuefetti
- Owner: rjp2525
- Created: 2022-01-29T15:37:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-29T20:27:12.000Z (over 3 years ago)
- Last Synced: 2025-02-24T12:12:23.921Z (7 months ago)
- Topics: animation-effects, component, confetti, vue, vue2, vuejs
- Language: Vue
- Homepage:
- Size: 1.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## VueFetti
This is a port of the React [dom-confetti](https://github.com/daniel-lundin/dom-confetti) by [Daniel Lundin](https://github.com/daniel-lundin) for Vue 2.
### Usage
Install from npm
```bash
npm install --save vuefetti
```
Import, register component and set options
```js
import Vue from 'vue';
import VueFetti from 'vuefetti';
export default {
...
components: {
VueFetti
},
...
data() {
return {
options: {
angle: 90,
spread: 360,
startVelocity: 40,
elementCount: 70,
dragFriction: 0.12,
duration: 3000,
stagger: 3,
width: "10px",
height: "10px",
perspective: "500px",
colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
},
visible: Vue.observable(false)
};
},
...
}
```
Add a method to toggle confetti:
```js
methods: {
async explode() {
this.visible = false;
await Vue.nextTick();
this.visible = true;
},
},
```
Add to your template
```html
Go time
```