Registry / web-framework / vue-confetti-explosion

vue-confetti-explosion

library1.0.2jsnpmunverified

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.

web-framework

npm install vue-confetti-explosion

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CONFETTI-EXPLO

vue-confetti-explosion

web-frameworkjavascriptv1.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ConfettiExplosion

✓ import ConfettiExplosion from 'vue-confetti-explosion';

✗ import { ConfettiExplosion } from 'vue-confetti-explosion';

The component is a default export, use `import ConfettiExplosion from ...` for ESM.

ConfettiExplosion (CommonJS)

✓ const ConfettiExplosion = require('vue-confetti-explosion').default;

✗ const ConfettiExplosion = require('vue-confetti-explosion');

While primarily for ESM, CommonJS environments require accessing the `.default` property for default exports.

Demonstrates how to programmatically trigger a confetti explosion on a button click, ensuring the component re-renders for each new effect with custom options.

import { nextTick, ref } from "vue"; import ConfettiExplosion from "vue-confetti-explosion"; const visible = ref(false); const explode = async () => { visible.value = false; await nextTick(); visible.value = true; }; <template> <div> <button @click="explode">Trigger Confetti</button> <ConfettiExplosion v-if="visible" :particleCount="200" :duration="4000" :force="0.6" :colors="['#F06292', '#BA68C8', '#64B5F6', '#81C784', '#FFD54F']"/> </div> </template>

Debug

Known issues

gotchaConfetti 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.

fix

Ensure the parent container's CSS includes `overflow: visible` to allow particles to spread freely and fully animate.

affects: >=1.0.0

gotchaParticles might visibly land and accumulate on a 'floor' within the stage if the `stageHeight` prop is not sufficient, instead of naturally disappearing off-screen.

fix

Adjust the `stageHeight` prop to a larger value (e.g., `:stageHeight="1000"`) to ensure particles fall out of view gracefully.

affects: >=1.0.0

gotchaThe `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.

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"`).

affects: >=1.0.0

gotchaWhile 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Confetti particles are not fully visible or are cut off.

A parent container has `overflow: hidden` or a similar CSS property that clips content.

fix

Set `overflow: visible` on the CSS of the component's direct or indirect parent container where the confetti should expand.

Error: Force prop value must be between 0 and 1.

The `force` prop was provided a number outside its valid range (0 to 1).

fix

Change the `force` prop to a value between 0 and 1 (e.g., `:force="0.75"`).

Confetti stops abruptly at the bottom of the screen instead of disappearing naturally.

The `stageHeight` prop is set too small for the visual space where the confetti should fall.

fix

Increase the `stageHeight` prop (e.g., `:stageHeight="1200"`) to allow confetti to fall further down before disappearing from view.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency for rendering the Vue 3 component.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/valgeirb/vue-confetti-explosion ↗

packagehttps://www.npmjs.com/package/vue-confetti-explosion ↗