Confetti
Confetti launches a burst of colored DOM particles when the trigger prop changes to true. It's renderless — particles are appended directly to the document body.
Basic usage
vue
<script setup>
import { ref } from 'vue'
const fired = ref(false)
function fireConfetti() {
fired.value = false
setTimeout(() => { fired.value = true }, 10)
}
</script>
<template>
<Confetti :trigger="fired" />
<button @click="fireConfetti">Launch Confetti 🎉</button>
</template>Custom colors
vue
<Confetti :trigger="fired" :colors="['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3']" />Focused origin
vue
<!-- Top-center burst -->
<Confetti :trigger="fired" :origin="{ x: 0.5, y: 0.1 }" :spread="120" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | boolean | false | Watch this prop — a change to true fires a burst |
count | number | 80 | Number of particles |
spread | number | 360 | Spread angle in degrees |
duration | number | 2500 | Particle animation duration in ms |
colors | string[] | ['#ff0000', '#00ff00', ...] | Particle colors |
origin | { x: number; y: number } | { x: 0.5, y: 0.5 } | Burst origin as 0–1 normalized screen coordinates |