{"id":12440,"library":"vue-confetti","title":"Vue Confetti Component","description":"vue-confetti is a versatile Vue component and plugin designed for generating dynamic confetti effects within web applications. It allows developers to programmatically trigger, stop, and customize confetti showers through a `$confetti` instance injected into Vue components. The library supports various particle shapes including circles, rectangles, hearts, and custom images, along with extensive customization for colors, sizes, drop rates, and wind effects. Currently at version 2.3.0, it offers compatibility with both Vue 2 and Vue 3, with Vue 3 support introduced in February 2022. While releases are not frequent, they typically address bug fixes or add minor features, responding to ecosystem changes like Vue 3 adoption. Its primary advantage lies in providing a declarative and easily configurable solution for celebratory UI effects without direct canvas API manipulation, simplifying the process for adding dynamic visual flair.","status":"maintenance","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/alexandermendes/vue-confetti","tags":["javascript"],"install":[{"cmd":"npm install vue-confetti","lang":"bash","label":"npm"},{"cmd":"yarn add vue-confetti","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-confetti","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue plugin functionality.","package":"vue","optional":false}],"imports":[{"note":"This is the default export containing the plugin object. For Vue 2, use `Vue.use(VueConfetti)`. For Vue 3, use `app.use(VueConfetti)`.","wrong":"import { VueConfetti } from 'vue-confetti';","symbol":"VueConfetti","correct":"import VueConfetti from 'vue-confetti';"},{"note":"The traditional way to register Vue 2 plugins globally on the Vue constructor.","wrong":"Vue.use(VueConfetti); // Missing 'import Vue from \"vue\"'","symbol":"Vue.use() (Vue 2)","correct":"import Vue from 'vue';\nimport VueConfetti from 'vue-confetti';\nVue.use(VueConfetti);"},{"note":"The modern way to register Vue 3 plugins on a specific application instance.","wrong":"Vue.use(VueConfetti); // For Vue 3, use `app.use()` on the app instance.","symbol":"app.use() (Vue 3)","correct":"import { createApp } from 'vue';\nimport VueConfetti from 'vue-confetti';\nconst app = createApp(App);\napp.use(VueConfetti);"}],"quickstart":{"code":"// main.ts or main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport VueConfetti from 'vue-confetti';\n\nconst app = createApp(App);\napp.use(VueConfetti);\napp.mount('#app');\n\n// App.vue\n<template>\n  <main>\n    <h1>Confetti Time!</h1>\n    <button @click=\"start\">Start Confetti</button>\n    <button @click=\"stop\">Stop Confetti</button>\n    <button @click=\"love\">Show Some Love (Hearts & Circles)</button>\n    <p>Click the buttons to trigger confetti effects.</p>\n  </main>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  methods: {\n    start(): void {\n      // Basic confetti with default settings\n      (this as any).$confetti.start();\n    },\n    stop(): void {\n      (this as any).$confetti.stop();\n    },\n    love(): void {\n      // Custom confetti with hearts and circles, then start and stop after 3s\n      (this as any).$confetti.update({\n        particles: [\n          { type: 'heart', size: 12 },\n          { type: 'circle', size: 8 }\n        ],\n        defaultColors: [\n          'red', 'pink', '#FF69B4', '#E0BBE4', '#957DAD'\n        ],\n        particlesPerFrame: 5\n      });\n      (this as any).$confetti.start(); // Must call start() after update()\n      setTimeout(() => (this as any).$confetti.stop(), 3000);\n    }\n  }\n});\n</script>\n\n<style>\nmain {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\nbutton {\n  margin: 0 10px;\n  padding: 10px 20px;\n  font-size: 16px;\n  cursor: pointer;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates how to install and use vue-confetti in a Vue 3 application with TypeScript, showcasing basic confetti triggering, stopping, and customized effects."},"warnings":[{"fix":"For Nuxt.js, register the plugin with `mode: 'client'` in your `nuxt.config.js` or `nuxt.config.ts`. For other SSR setups, ensure the plugin is only loaded or initialized on the client side.","message":"vue-confetti relies on browser globals (like `window`) and is not designed for server-side rendering (SSR). It will cause errors if rendered on the server without proper client-only configuration.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For Vue 2, use `import Vue from 'vue'; Vue.use(VueConfetti);`. For Vue 3, use `import { createApp } from 'vue'; const app = createApp(App); app.use(VueConfetti);`.","message":"The method of registering Vue plugins changed significantly between Vue 2 and Vue 3. Using `Vue.use()` for a Vue 3 application or `app.use()` for a Vue 2 application will result in errors.","severity":"gotcha","affected_versions":">=2.3.0"},{"fix":"Always call `$confetti.start()` explicitly after `$confetti.update()` if you intend to immediately begin a confetti shower with the new settings.","message":"Calling `$confetti.update()` only configures the confetti properties; it does not automatically start the confetti animation. Developers often expect `update` to also trigger the effect.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vue-confetti` is loaded only on the client. In Nuxt, configure it in `nuxt.config.js` as `{ src: '~/plugins/vue-confetti.js', mode: 'client' }`.","cause":"Attempting to use `vue-confetti` in a server-side rendering (SSR) environment without marking it as client-only.","error":"ReferenceError: window is not defined"},{"fix":"Extend Vue's `ComponentCustomProperties` interface via declaration merging. Create a `shims-vue-confetti.d.ts` file:\n```typescript\nimport 'vue';\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $confetti: {\n      start: (options?: any) => void;\n      stop: () => void;\n      update: (options?: any) => void;\n    };\n  }\n}\n```\nAlternatively, cast `this` to `any` in component methods: `(this as any).$confetti.start()`.","cause":"TypeScript does not automatically know about globally injected properties like `$confetti` unless explicitly declared.","error":"Property '$confetti' does not exist on type 'ComponentPublicInstance<...>' or similar TypeScript error."},{"fix":"Ensure your project is configured for ESM (e.g., `\"type\": \"module\"` in `package.json` for Node.js) or use a bundler like Webpack/Vite that transpiles ESM to CJS if targeting older environments. For `vue-confetti`, stick to `import` statements as it's designed for modern module systems.","cause":"Attempting to use ESM `import` syntax in a CommonJS-only environment (e.g., older Node.js or specific build configurations), or vice-versa with `require()` in an ESM module.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm"}