"You only live once, so it's better to do it with confetti."
A delightful Vue 3 plugin that adds a burst of confettis to your Vue 3 application.
npm install vue-3-party-confettis
yarn add vue-3-party-confettis
Register as a plugin
// main.ts
import { createApp } from 'vue'
import { partyPlugin } from 'vue-3-party-confettis'
import 'vue-3-party-confettis/style.css'
import App from './App.vue'
createApp(App).use(partyPlugin).mount('#app')
Inject the startParty
method wherever you want in your app
// Anywhere.vue
<script setup lang="ts">
import { inject, onMounted } from 'vue';
import { confettiVariationInject } from 'vue-3-party-confettis';
const { startParty } = inject(confettiVariationInject)
onMounted(() => startParty())
</script>
<template>
<!-- -->
</template>
Alternatively, you can use the global <PartyConfettis>
component
<template>
<PartyConfettis></PartyConfettis>
</template>
Use multiple options to own your party :
<script setup lang="ts">
import { inject, onMounted } from 'vue';
import { confettiVariationInject } from 'vue-3-party-confettis';
const { startParty } = inject(confettiVariationInject)
onMounted(() => startParty({
colors: ["#DAA520", "#00FFFF", "#FF00FF"], // Any colors you want
velocity: 'slow', // "slow" | "medium" | "speed"
size: 'big', // "small" | "medium" | "big"
shapes: ['circle'], // "circle" | "square" | "triangle"
quantity: 'party', // "few" | "medium" | "party" | "yolo" | "burn-my-cpu"
}))
</script>
export interface StartPartyOptions {
duration?: number
infinite?: boolean
colors?: string[]
velocity?: AnimationVelocity
size?: ConfettiSize
quantity?: ConfettiQuantity
shapes?: ConfettiShapes[]
from?: ConfettiFrom
}
export type AnimationVelocity = "slow" | "medium" | "speed"
export type ConfettiSize = "small" | "medium" | "big"
export type ConfettiShapes = "circle" | "square" | "triangle"
export type ConfettiQuantity = "few" | "medium" | "party" | "yolo" | "burn-my-cpu"
export type ConfettiFrom = "top-left" | "top-random" | "top-right" | "top-center"
export interface ConfettisProps {
colors?: string[],
shapes?: ConfettiShapes[]
velocity?: AnimationVelocity
size?: ConfettiSize
quantity?: ConfettiQuantity
from?: ConfettiFrom
}
export interface ConfettiProvided {
startParty: (opts: StartPartyOptions) => void
stopParty: () => void
}
This project is licensed under the MIT License - see the LICENSE file for details.
Thanks to José Matheus for the inspiration, which led to the creation of this confetti effect. You can find the original source at this CodePen. Thanks to Anatole Acqueberge for creating this amazing Vue 3 confettis plugin! Feel free to contribute, report issues, or suggest improvements. Happy coding! 🎉