"You only live once, so it's better to do it with confetti."

vue-3-party-confettis

A delightful Vue 3 plugin that adds a burst of confettis to your Vue 3 application.

Installation

npm install vue-3-party-confettis
yarn add vue-3-party-confettis

Usage

Register as a plugin

// main.ts
import { createApp } from 'vue'
import { partyPlugin } from 'vue-3-party-confettis'
import 'vue-3-party-confettis/style.css'
import App from './App.vue'

createApp(App).use(partyPlugin).mount('#app')

Inject the startParty method wherever you want in your app

// Anywhere.vue

<script setup lang="ts">
    import { inject, onMounted } from 'vue';
    import { confettiVariationInject } from 'vue-3-party-confettis';
    const { startParty } = inject(confettiVariationInject)

    onMounted(() => startParty())
</script>

<template>
  <!--  -->
</template>

Alternatively, you can use the global <PartyConfettis> component

<template>
  <PartyConfettis></PartyConfettis>
</template>

Use multiple options to own your party :

<script setup lang="ts">
  import { inject, onMounted } from 'vue';
  import { confettiVariationInject } from 'vue-3-party-confettis';
  const { startParty } = inject(confettiVariationInject)

  onMounted(() => startParty({
      colors: ["#DAA520", "#00FFFF", "#FF00FF"], // Any colors you want
      velocity: 'slow', // "slow" | "medium" | "speed"
      size: 'big', // "small" | "medium" | "big"
      shapes: ['circle'], // "circle" | "square" | "triangle"
      quantity: 'party', // "few" | "medium" | "party" | "yolo" | "burn-my-cpu"
  }))
</script>

Interfaces and types

export interface StartPartyOptions {
  duration?: number
  infinite?: boolean
  colors?: string[]
  velocity?: AnimationVelocity
  size?: ConfettiSize
  quantity?: ConfettiQuantity
  shapes?: ConfettiShapes[]
  from?: ConfettiFrom
}

export type AnimationVelocity = "slow" | "medium" | "speed"

export type ConfettiSize = "small" | "medium" | "big"

export type ConfettiShapes = "circle" | "square" | "triangle"

export type ConfettiQuantity = "few" | "medium" | "party" | "yolo" | "burn-my-cpu"

export type ConfettiFrom = "top-left" | "top-random" | "top-right" | "top-center"

export interface ConfettisProps {
  colors?: string[], 
  shapes?: ConfettiShapes[]
  velocity?: AnimationVelocity
  size?: ConfettiSize
  quantity?: ConfettiQuantity
  from?: ConfettiFrom
}

export interface ConfettiProvided {
  startParty: (opts: StartPartyOptions) => void
  stopParty: () => void
}

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Thanks to José Matheus for the inspiration, which led to the creation of this confetti effect. You can find the original source at this CodePen. Thanks to Anatole Acqueberge for creating this amazing Vue 3 confettis plugin! Feel free to contribute, report issues, or suggest improvements. Happy coding! 🎉