Simple Customizable Fortune Wheel Component For Vue 3 – Roulette

Roulette is a simple, flexible, and customizable fortune wheel component for Vue 3 applications.

You can use it as a fun way to engage users or as a gamification tool to incentivize certain actions.

How to use it:

1. Import the Roulette component.

import { Roulette } from "vue3-roulette";

export default {
  components: {
    Roulette,
  },
};

2. Create a basic fortune wheel in your app.

<template>
  <Roulette ref="wheel" :items="items" @click="launchWheel" />
</template>

export default {
  name: "App",
  components: {
    Roulette,
  },
  data() {
    return {
      items: [
        {
          id: 1,
          name: "Banana",
          htmlContent: "Banana",
          textColor: "",
          background: "",
        },
        {
          id: 2,
          name: "Apple",
          htmlContent: "Apple",
          textColor: "",
          background: "",
        },
        {
          id: 3,
          name: "Orange and Purple",
          htmlContent: "Orange<br>and Purple",
          textColor: "",
          background: "",
        },
        {
          id: 4,
          name: "Cherry",
          htmlContent: "Cherry",
          textColor: "",
          background: "",
        },
      ],
    };
  },
  methods: {
    launchWheel() {
      this.$refs.wheel.launchWheel();
    },
  },
};

3. Available component props.

items: {
  type: Object,
  required: true,
  validator(value) {
    return value.length >= 4;
  },
},
firstItemIndex: {
  type: Object,
  required: false,
  default() {
    return { value: 0 };
  },
},
wheelResultIndex: {
  type: Object,
  required: false,
  default() {
    return { value: null };
  },
  validator(obj) {
    return typeof obj.value === "number";
  },
},
centeredIndicator: {
  type: Boolean,
  required: false,
  default: false,
},
indicatorPosition: {
  type: String,
  required: false,
  default: "top",
  validator(value) {
    return ["top", "right", "bottom", "left"].includes(value);
  },
},
size: {
  type: Number,
  required: false,
  default: 300,
},
displayShadow: {
  type: Boolean,
  required: false,
  default: false,
},
duration: {
  type: Number,
  required: false,
  default: 4,
},
resultVariation: {
  type: Number,
  required: false,
  default: 0,
  validator(value) {
    return value >= 0 && value <= 100;
  },
},
easing: {
  type: String,
  required: false,
  default: "ease",
  validator(value) {
    return ["ease", "bounce"].includes(value);
  },
},
counterClockwise: {
  type: Boolean,
  required: false,
  default: false,
},
horizontalContent: {
  type: Boolean,
  required: false,
  default: false,
},
displayBorder: {
  type: Boolean,
  required: false,
  default: false,
},
displayIndicator: {
  type: Boolean,
  required: false,
  default: true,
},
baseDisplay: {
  type: Boolean,
  required: false,
  default: false,
},
baseSize: {
  type: Number,
  required: false,
  default: 100,
},
baseDisplayShadow: {
  type: Boolean,
  required: false,
  default: false,
},
baseDisplayIndicator: {
  type: Boolean,
  required: false,
  default: false,
},
baseBackground: {
  type: String,
  required: false,
  default: "",
},

Preview:

Changelog:

v0.3.3 (02/25/2023)

• Update: Return selected item on wheel start

Download Details:

Author: nitocode

Live Demo: https://codesandbox.io/s/vue3-roulette-c8tml?file=/src/App.vue

Download Link: https://github.com/nitocode/vue3-roulette/archive/refs/heads/main.zip

Official Website: https://github.com/nitocode/vue3-roulette

Install & Download:

# NPM
$ npm i vue3-roulette