{"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,"search_vec":"'1.0.2':26 '3':14,90 'anim':22 'api':42,102 'applic':50 'array':70 'bug':94 'cadenc':82 'celebratori':45 'color':69 'compon':15 'confetti':2,6,20,62 'consist':41 'counterpart':38 'creat':18 'current':23 'customiz':19 'design':16 'differenti':98 'direct':31 'doesn':76 'durat':68 'eas':104 'ecosystem':91 'effect':47 'explos':3,7,21,72 'fix':95 'focus':52 'forc':73 'generat':57 'integr':106 'key':97 'librari':28 'lightweight':10 'like':85 'major':88 'minim':101 'number':60 'offer':39 'option':65 'particl':63 'perform':12,56 'popular':34 'port':32 'react':37 'releas':81 'shift':92 'simplic':54 'size':67 'specifi':59,78 'strict':80 'svelt':35 'tie':86 'trigger':44 'updat':83 'version':25 'visual':46 'vue':1,5,13,49,89 'vue-confetti-explos':4 'within':48","created_at":"2026-04-19T13:43:10.892301+00:00","updated_at":"2026-04-19T13:43:10.892301+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/valgeirb/vue-confetti-explosion","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-confetti-explosion","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}