Usage
Use the auto-imported useConfetti composable to programmatically control canvas-confetti.
<script setup lang="ts">
const confetti = useConfetti()
</script>
- The
useConfetticomposable is created usingcreateSharedComposable, ensuring that the samecanvas-confettiis shared across your entire application.
Since canvas-confetti works with the DOM, make sure your code only runs on the client.
API
fire(options?: confetti.Options) => Promise<undefined> | null
Fire some confetti.
<script setup lang="ts">
const confetti = useConfetti()
function fireConfetti(): void {
confetti.fire()
}
</script>
create(canvas?: HTMLCanvasElement, options?: GlobalOptions) => CreateTypes
This method creates an instance of the confetti function that uses a custom canvas.
Use if you need to specify your own parameters for confetti.
<script setup lang="ts">
const confetti = useConfetti()
function fireConfettiWithOptions(): void {
confetti.create()
confetti.fire({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
})
}
</script>
Or like this. Specify your own Canvas.
<script setup lang="ts">
import { ref } from 'vue'
const myCanvas = ref<HTMLCanvasElement | undefined>()
const confetti = useConfetti()
function fireAtPlace(): void {
const confettiInstance = confetti.create(myCanvas.value, { resize: true })
confettiInstance({
spread: 70
})
}
</script>
<template>
<B24Button label="custom canvas" color="link" depth="dark" @click.stop="fireAtPlace" />
<div>
<canvas ref="myCanvas" class="h-64 w-1/2" />
</div>
</template>
Example
Here's a complete example of how to use the useConfetti composable: