Add micro-interactions to your app, and rewards users with the rain of confetti, emoji or balloons

<script setup>
  import { useReward } from 'vue-rewards'
  import { onMounted } from 'vue'

  const config = {
    startVelocity:10,
    spread:180,
    elementCount:100
    // etc...
    // you can make this reactive instead etc.
  }

  // has to be in onMounted, otherwise the element won't be found.
  // This will trigger the animation immediately.
  onMounted(() => {
    // useReward has the following arguments:
    // userReward(id, type, config)
    // type can be one of 'confetti', 'balloons' or 'emoji'
    // no need to add # before the id
    // see below for all of the config options
    const { reward, isAnimating } = useReward('some-id', 'confetti', config);

    // to trigger the animation, call the reward function
    reward();

    // isAnimating is a boolean that is true when the animation is running
  })

  // or you can trigger the animation onclick
  // I have renamed reward to balloonsReward etc.

  const { reward: balloonsReward, isAnimating: isBalloonsAnimating } = useReward('some-id', 'balloons');
</script>

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

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

<script>
  export default {
    mounted() {
      const config = {
        startVelocity: 10,
        spread: 180,
        elementCount: 100
      }
      const { reward, isAnimating } = this.$reward('some-id', 'confetti', config);
      reward();
    },
    methods: {
      balloonsReward(id) {
        const { reward, isAnimating } = this.$reward(id, 'balloons');
        reward();
        return isAnimating
      }

    }
  }
</script>