confetti-js vue 3

confetti-js.vue

<script setup lang="ts">
  import ConfettiGenerator from 'confetti-js'
  const confettiElement = ref<HTMLCanvasElement | null>(null)
  const canvasBoundingRect = computed(() => {
    if (confettiElement.value) {
      return confettiElement.value.getBoundingClientRect()
    }
    return {
      top: 0,
      left: 0,
      width: 0,
      height: 0,
    }
  })
  const confettiSettings = computed(() => {
    return {
      target: confettiElement.value,
      max: 150,
      size: 0.5,
      animate: true,
      props: ['square'],
      colors: [
        [41, 106, 166],
        [140, 193, 64],
        [219, 44, 111],
        [88, 178, 85],
        [56, 78, 144],
        [84, 189, 199],
        [59, 82, 147],
        [134, 191, 65],
        [89, 177, 70],
        [127, 72, 139],
        [241, 170, 73],
        [142, 194, 64],
        [63, 92, 154],
        [241, 170, 73],
        [90, 72, 139],
        [210, 34, 126],
        [209, 36, 42],
        [66, 187, 206],
        [211, 32, 122],
        [201, 215, 56],
        [212, 22, 124],
        [125, 42, 121],
        [252, 236, 38],
        [152, 122, 169],
      ],
      clock: 35,
      rotate: true,
      width: canvasBoundingRect.value.width,
      height: canvasBoundingRect.value.height,
    }
  })
  const confetti = ref()

  watch(confettiElement, async () => {
    if (confettiElement.value) {
      confetti.value = new (ConfettiGenerator as any)(confettiSettings.value)
      confetti.value.render()
    }
  })
  onBeforeUnmount(() => {
    confetti.value.clear()
  })
</script>

<template>
  <canvas
    ref="confettiElement"
    class="absolute z-[100] h-screen w-screen"></canvas>
</template>