{"_id":"@neoconfetti/vue","_rev":"3-c86032f019053430df36e207d4f6525e","name":"@neoconfetti/vue","dist-tags":{"latest":"2.2.1"},"versions":{"2.0.0":{"name":"@neoconfetti/vue","version":"2.0.0","description":"Confetti explosion in Vue 🎉🎊","main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"repository":{"type":"git","url":"git+https://github.com/PuruVJ/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","vue","solid","react","nextjs","remix","vite"],"author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/PuruVJ/neoconfetti/issues"},"homepage":"https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme","devDependencies":{"@neoconfetti/core":"2.0.0"},"scripts":{"compile":"tsup","compile:watch":"tsup --watch","size":"echo 'Vue size:' && brotli-size dist/min/index.js","pub":"pnpm build && pnpm publish --no-git-checks --access public","pub:dry":"pnpm build && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/vue@2.0.0","_integrity":"sha512-C2giaybRh0Qvs0PSOHFqnm3dmbyT/ebkJfZJhXdorPzxd1eE23PNaI20zvU3oljO+pKeOAdSJoucoTlj9XHeHQ==","_resolved":"/tmp/7f05f865ee283a1129ff8ff7af62c714/neoconfetti-vue-2.0.0.tgz","_from":"file:neoconfetti-vue-2.0.0.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-C2giaybRh0Qvs0PSOHFqnm3dmbyT/ebkJfZJhXdorPzxd1eE23PNaI20zvU3oljO+pKeOAdSJoucoTlj9XHeHQ==","shasum":"5399ef543a2aa2a8bef8f1fb61f0b28519c4bcb2","tarball":"https://registry.npmjs.org/@neoconfetti/vue/-/vue-2.0.0.tgz","fileCount":5,"unpackedSize":17936,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDR7/gWuHtd27bhrzZGh2HiMMVQsDmJVhEXm0aNshiIAiEA8NPDzfvmxONdmN1+Gokh4R3z0qUNjOxwfCH+/RY/nNU="}]},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":"awesomepuruvj@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_2.0.0_1702894361235_0.09447685388138383"},"_hasShrinkwrap":false},"2.1.0":{"name":"@neoconfetti/vue","version":"2.1.0","description":"Confetti explosion in Vue 🎉🎊","main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"repository":{"type":"git","url":"git+https://github.com/PuruVJ/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","vue","solid","react","nextjs","remix","vite"],"author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/PuruVJ/neoconfetti/issues"},"homepage":"https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme","devDependencies":{"@neoconfetti/core":"2.1.0"},"scripts":{"compile":"tsup","compile:watch":"tsup --watch","size":"echo 'Vue size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/vue@2.1.0","_integrity":"sha512-IN1KHTNpGI4uxFRqtomKrstfP7cmbc38equtcbFsAkX6lz/7iCG8xZNeMQlM2gXysjMneMtx+XrdopcM0PC/dQ==","_resolved":"/tmp/5d6028c3e094af6c93a5c8fc4814fd82/neoconfetti-vue-2.1.0.tgz","_from":"file:neoconfetti-vue-2.1.0.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-IN1KHTNpGI4uxFRqtomKrstfP7cmbc38equtcbFsAkX6lz/7iCG8xZNeMQlM2gXysjMneMtx+XrdopcM0PC/dQ==","shasum":"17e00bf044955fca5b8e7256413024ea424d7f41","tarball":"https://registry.npmjs.org/@neoconfetti/vue/-/vue-2.1.0.tgz","fileCount":5,"unpackedSize":20570,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVuliYmn4i732rBjEErfc2UA8tnvacYWY56VqiwZD8AgIgRIUeRTGGwEHlgbv63FM9+aoqI0E2XdgK2GV4Kt6lwzM="}]},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":"awesomepuruvj@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_2.1.0_1702971249436_0.4211840832192988"},"_hasShrinkwrap":false},"2.2.0":{"name":"@neoconfetti/vue","version":"2.2.0","description":"Confetti explosion in Vue 🎉🎊","main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"repository":{"type":"git","url":"git+https://github.com/PuruVJ/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","vue","solid","react","nextjs","remix","vite"],"author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/PuruVJ/neoconfetti/issues"},"homepage":"https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme","devDependencies":{"@neoconfetti/core":"2.2.0"},"scripts":{"compile":"tsup","compile:watch":"tsup --watch","size":"echo 'Vue size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/vue@2.2.0","_integrity":"sha512-MnyNlnm2Zv96sK0t21iISeWg5wAThoxtwCV50Vg3yF/wZtPpE5niZD3kC846lM6YfcRr/M7nvc7rcKa6Nrvkkg==","_resolved":"/tmp/415322e15cb74b1ca23019a7218ad4a7/neoconfetti-vue-2.2.0.tgz","_from":"file:neoconfetti-vue-2.2.0.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-MnyNlnm2Zv96sK0t21iISeWg5wAThoxtwCV50Vg3yF/wZtPpE5niZD3kC846lM6YfcRr/M7nvc7rcKa6Nrvkkg==","shasum":"9bf634f8a84358c604a213aeb8fd352fc3732bd4","tarball":"https://registry.npmjs.org/@neoconfetti/vue/-/vue-2.2.0.tgz","fileCount":5,"unpackedSize":20785,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7apTgU/ffNfnNjmiJhyNWseYX+ZFGJ06ZMJ/cDYO0CAIhAPA09OUuR3YVZvhwq9BZERro8w76ZtyunJDsqUa1CdiP"}]},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":"awesomepuruvj@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_2.2.0_1703013159468_0.1413080155816373"},"_hasShrinkwrap":false},"2.2.1":{"name":"@neoconfetti/vue","version":"2.2.1","description":"Confetti explosion in Vue 🎉🎊","main":"./dist/index.js","module":"./dist/index.js","type":"module","types":"./dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":{"production":"./dist/min/index.js","development":"./dist/index.js"},"default":"./dist/min/index.js"},"./package.json":"./package.json"},"repository":{"type":"git","url":"git+https://github.com/PuruVJ/neoconfetti.git"},"keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","vue","solid","react","nextjs","remix","vite"],"author":{"name":"Puru Vijay"},"license":"MIT","bugs":{"url":"https://github.com/PuruVJ/neoconfetti/issues"},"homepage":"https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme","devDependencies":{"@neoconfetti/core":"2.2.1"},"scripts":{"compile":"tsup","compile:watch":"tsup --watch","size":"echo 'Vue size:' && brotli-size dist/min/index.js","pub":"pnpm compile && pnpm publish --no-git-checks --access public","pub:dry":"pnpm compile && pnpm publish --dry-run --no-git-checks --access public"},"_id":"@neoconfetti/vue@2.2.1","_integrity":"sha512-GXe5XoHlMK8VIxmxKuAgF9QQwRoDLmtiwVhONA9rzF+zOLGfOVLxo4OEDZqU9F0gJkB7U23BLlGJ3ouOb+kguw==","_resolved":"/tmp/c2f1f3fb823ae8d63b10278b7e55ed47/neoconfetti-vue-2.2.1.tgz","_from":"file:neoconfetti-vue-2.2.1.tgz","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-GXe5XoHlMK8VIxmxKuAgF9QQwRoDLmtiwVhONA9rzF+zOLGfOVLxo4OEDZqU9F0gJkB7U23BLlGJ3ouOb+kguw==","shasum":"149f948ad12a1cce0f337cc54373e3439bdac87e","tarball":"https://registry.npmjs.org/@neoconfetti/vue/-/vue-2.2.1.tgz","fileCount":5,"unpackedSize":20841,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHiAwRfX6pgXty7Yhcd05kjdGaPY2tutS6k7yfZbGlQNAiBAEq5o2xJebIcQv5ej5INQPJxj3imiCk4RiqAOXcT6hw=="}]},"_npmUser":{"name":"puruvj","email":"awesomepuruvj@gmail.com"},"directories":{},"maintainers":[{"name":"puruvj","email":"awesomepuruvj@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_2.2.1_1703408367805_0.9149575896689994"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-18T10:12:41.117Z","2.0.0":"2023-12-18T10:12:41.423Z","modified":"2023-12-24T08:59:28.186Z","2.1.0":"2023-12-19T07:34:09.712Z","2.2.0":"2023-12-19T19:12:39.711Z","2.2.1":"2023-12-24T08:59:28.017Z"},"maintainers":[{"name":"puruvj","email":"awesomepuruvj@gmail.com"}],"description":"Confetti explosion in Vue 🎉🎊","homepage":"https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme","keywords":["confetti","party","fun","badass","badassery","svelte","sveltekit","small","tiny","performant","vue","solid","react","nextjs","remix","vite"],"repository":{"type":"git","url":"git+https://github.com/PuruVJ/neoconfetti.git"},"author":{"name":"Puru Vijay"},"bugs":{"url":"https://github.com/PuruVJ/neoconfetti/issues"},"license":"MIT","readme":"# @neoconfetti/vue\n\nLet's party 🎊🎊 with Vue! `@neoconfetti/vue` allows you to show an awesome confetti explosion on your page, with Vue!\n\n## Features\n\n- 🤏 Tiny - 1.56KB min+br.\n- 🐇 Simple - Quite simple to use, and effectively no-config required!\n- 🧙‍♀️ Elegant - Vue directive `v-confetti` rather than setting things up in `mounted()` hook.\n- 🗃️ Customizable - Offers tons of options that you can modify to get different behaviors.\n- 🖥️ SSR friendly - Works seamlessly in NuxtJS, VitePress and other Server Side Rendering environments!\n\n<!-- TODO: [Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24) -->\n\n## Installing\n\n```bash\n# pnpm\npnpm add @neoconfetti/vue\n\n# npm\nnpm install @neoconfetti/vue\n\n# yarn\nyarn add @neoconfetti/vue\n```\n\n## Usage\n\nBasic usage:\n\n```vue\n<script>\nimport { vConfetti } from '@neoconfetti/vue';\n</script>\n\n<div v-confetti />\n```\n\nCustomizing behavior with options:\n\n```vue\n<div v-confetti=\"{ particleCount: 200, force: 0.3 }\" />\n```\n\n## Props\n\nThere's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.\n\n### particleCount\n\nNumber of confetti particles to create.\n\n**type:** `number`\n\n**Default value:** 150\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ particleCount: 200 }\" />\n```\n\n### particleSize\n\nSize of the confetti particles in pixels\n\n**type:** `number`\n\n**Default value:** 12\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ particleSize: 20 }\" />\n```\n\n### particleShape\n\nShape of particles to use. Can be `mix`, `circles` or `rectangles`\n\n`mix` will use both circles and rectangles\n`circles` will use only circles\n`rectangles` will use only rectangles\n\n**type:** `'mix' | 'circles' | 'rectangles'`\n\n**Default value:** `'mix'`\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ particleShape: 'circles' }\" />\n```\n\n### duration\n\nDuration of the animation in milliseconds\n\n**type:** `number`\n\n**Default value:** 3500\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ duration: 5000 }\" />\n```\n\n### colors\n\nColors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.\n\n**type:** `Array<string>`\n\n**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'] }\" />\n```\n\n### force\n\nForce of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.\n\n**type:** `number`\n\n**Default value:** 0.5\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ force: 0.3 }\" />\n```\n\n### stageHeight\n\nHeight of the stage in pixels. Confetti will only fall within this height.\n\n**type:** `number`\n\n**Default value:** 800\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ stageHeight: 500 }\" />\n```\n\n### stageWidth\n\nWidth of the stage in pixels. Confetti will only fall within this width.\n\n**type:** `number`\n\n**Default value:** 1600\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ stageWidth: 500 }\" />\n```\n\n### destroyAfterDone\n\nWhether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.\n\n**type:** `boolean`\n\n**Default value:** `true`\n\n**Example:**\n\n```vue\n<div v-confetti=\"{ destroyAfterDone: false }\" />\n```\n\n<!--\n## Examples\n\n[Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.50.1)\n\n[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.50.1) -->\n\n## Fine-grained reactivity\n\nChanging the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If `particlesCount` isn't changed, and properties like `colors` or `particleShape` is changed, the confetti particles will change their colors or shape mid-flight.\n\n## Performance\n\nThis library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.\n\nAlso, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `destroyAfterDone` to `false`.\n\n## Credits\n\nThis library is the port of the amazing [react-confetti-explosion](https://www.npmjs.com/package//react-confetti-explosion) package, just **10X** smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine 😉\n\n## License\n\nMIT License\n© [Puru Vijay](https://twitter.com/puruvjdev)\n","readmeFilename":"README.md"}