{"id":12439,"library":"vue-confetti-explosion","title":"Vue Confetti Explosion","description":"vue-confetti-explosion is a lightweight and performant Vue 3 component designed to create customizable confetti explosion animations. Currently at version 1.0.2, this library is a direct port from popular Svelte and React counterparts, offering a consistent API for triggering celebratory visual effects within Vue applications. It focuses on simplicity and performance, generating a specified number of confetti particles with options for size, duration, color arrays, and explosion force. While it doesn't specify a strict release cadence, updates are likely tied to major Vue 3 ecosystem shifts or bug fixes. A key differentiator is its minimal API and ease of integration into `<script setup>`-style Vue components, making it an ideal choice for adding quick, dynamic visual flair without significant overhead.","status":"active","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/valgeirb/vue-confetti-explosion","tags":["javascript","confetti","party","fun","badass","badassery","vue","vue3","small","typescript"],"install":[{"cmd":"npm install vue-confetti-explosion","lang":"bash","label":"npm"},{"cmd":"yarn add vue-confetti-explosion","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-confetti-explosion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering the Vue 3 component.","package":"vue","optional":false}],"imports":[{"note":"The component is a default export, use `import ConfettiExplosion from ...` for ESM.","wrong":"import { ConfettiExplosion } from 'vue-confetti-explosion';","symbol":"ConfettiExplosion","correct":"import ConfettiExplosion from 'vue-confetti-explosion';"},{"note":"While primarily for ESM, CommonJS environments require accessing the `.default` property for default exports.","wrong":"const ConfettiExplosion = require('vue-confetti-explosion');","symbol":"ConfettiExplosion (CommonJS)","correct":"const ConfettiExplosion = require('vue-confetti-explosion').default;"}],"quickstart":{"code":"import { nextTick, ref } from \"vue\";\nimport ConfettiExplosion from \"vue-confetti-explosion\";\n\nconst visible = ref(false);\n\nconst explode = async () => {\n  visible.value = false;\n  await nextTick();\n  visible.value = true;\n};\n\n<template>\n  <div>\n    <button @click=\"explode\">Trigger Confetti</button>\n    <ConfettiExplosion v-if=\"visible\" :particleCount=\"200\" :duration=\"4000\" :force=\"0.6\" :colors=\"['#F06292', '#BA68C8', '#64B5F6', '#81C784', '#FFD54F']\"/>\n  </div>\n</template>","lang":"typescript","description":"Demonstrates how to programmatically trigger a confetti explosion on a button click, ensuring the component re-renders for each new effect with custom options."},"warnings":[{"fix":"Ensure the parent container's CSS includes `overflow: visible` to allow particles to spread freely and fully animate.","message":"Confetti particles may appear cut off or confined if the parent container does not have `overflow: visible` applied, preventing them from spreading across the intended area.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Adjust the `stageHeight` prop to a larger value (e.g., `:stageHeight=\"1000\"`) to ensure particles fall out of view gracefully.","message":"Particles might visibly land and accumulate on a 'floor' within the stage if the `stageHeight` prop is not sufficient, instead of naturally disappearing off-screen.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always ensure `force` is set to a value like `0.5` (default) or any float between `0` and `1` (e.g., `:force=\"0.75\"`).","message":"The `force` prop, which controls the intensity of the explosion, must be a numerical value between 0 and 1. Providing a value outside this range will result in an error and prevent the explosion.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Do not attempt to use `--x` or `--y` CSS variables for positioning on the `ConfettiExplosion` component; they are not supported by this Vue component and will have no effect.","message":"While the Svelte version of this library (from which `vue-confetti-explosion` is ported) supports `--x` and `--y` CSS variables for positional styling, these 'Style Props' are explicitly *not* implemented in this Vue 3 component.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Set `overflow: visible` on the CSS of the component's direct or indirect parent container where the confetti should expand.","cause":"A parent container has `overflow: hidden` or a similar CSS property that clips content.","error":"Confetti particles are not fully visible or are cut off."},{"fix":"Change the `force` prop to a value between 0 and 1 (e.g., `:force=\"0.75\"`).","cause":"The `force` prop was provided a number outside its valid range (0 to 1).","error":"Error: Force prop value must be between 0 and 1."},{"fix":"Increase the `stageHeight` prop (e.g., `:stageHeight=\"1200\"`) to allow confetti to fall further down before disappearing from view.","cause":"The `stageHeight` prop is set too small for the visual space where the confetti should fall.","error":"Confetti stops abruptly at the bottom of the screen instead of disappearing naturally."}],"ecosystem":"npm"}