Add Engaging Celebrations To Vue Apps With vue-rewards

Install & Download:

# Yarn
$ yarn add vue-rewards
# NPM
$ npm i vue-rewards

Description:

vue-rewards is a Vue 3 component that allows developers to easily add celebratory micro-interactions to their apps.

With just a few lines of code, you can reward users with fun animations like confetti, emojis or balloons when they complete actions like submitting a form, making a purchase, or reaching a milestone.

How to use it:

1. Import and register the vue-rewards component.

import { createApp } from "vue";
import App from "./App.vue";
import VueRewards from "vue-rewards";
const app = createApp(App);
app.use(VueRewards);
app.mount("#app");

2. Enable a button to trigger a celebration animation.

<span id="some-id"> Let's celebrate! </span>
<template>
  <button @click="balloonsReward">
    Click me!
  </button>
</template>

import { useReward } from 'vue-rewards'
import { onMounted } from 'vue'
const config = {
      // configs here
}
onMounted(() => {
  const { reward, isAnimating } = useReward('some-id', 'confetti', config);
  reward();
})
const { reward: balloonsReward, isAnimating: isBalloonsAnimating } = useReward('some-id', 'balloons');

3. Available configs.

BalloonsConfig = {
  lifetime?: number;
  angle?: number;
  decay?: number;
  spread?: number;
  startVelocity?: number;
  elementCount?: number;
  elementSize?: number;
  zIndex?: number;
  position?: string;
  colors?: string[];
  onAnimationComplete?: () => void;
};

export type ConfettiConfig = {
  lifetime?: number;
  angle?: number;
  decay?: number;
  spread?: number;
  startVelocity?: number;
  elementCount?: number;
  elementSize?: number;
  zIndex?: number;
  position?: string;
  colors?: string[];
  onAnimationComplete?: () => void;
};

export type EmojiConfig = {
  lifetime?: number;
  angle?: number;
  decay?: number;
  spread?: number;
  startVelocity?: number;
  elementCount?: number;
  elementSize?: number;
  zIndex?: number;
  position?: string;
  emoji?: string[];
  onAnimationComplete?: () => void;
};

Preview: