How to build an easy-to-use Fortune Wheel In Vue.js

Hello Guys, today I am going to Introduce you another most exciting GitHub repository an easy-to-use Fortune in Vue.js.

vue3-fortune-wheel:

An easier fortune-wheel in Vue.js

Installation:

NPM / YARN

Install the package:

npm install vue3-fortune-wheel --save
yarn add vue3-fortune-wheel


import { Wheel } from 'vue3-fortune-wheel'

export default {
  components: {
    Wheel,
  },
}

<Wheel />

Props/Options

Gift

  • Type: Number
  • Default: null

This data corresponds to the id of your winning object. In my case an API returns me the id. If you are not in this case you can create a method that randomly chooses an id

Example of this method:

randomGift() {
  return Math.floor(Math.random() * this.data.lengh) + 1
}

animDuration

  • Type: Number
  • Default: 5000

How many millisecondes you want the wheel to turn

Data

  • Type: Array
  • Default: []
  • id: number
  • value: string
  • color: string
  • bgColor: string

Example :

data: [
  {
    id: 1,
    value: "Gift 1",
    color: '#7d7db3',
    bgColor: '#ffffff'
  },
  {
    id: 2,
    value: "Gift 2",
    color: '#ffffff',
    bgColor: '#ffffff'
  },
  {
    id: 3,
    value: "Gift 3",
    color: '#c92729',
    bgColor: '#ffffff'
  },
],

ImgParams:

  • Type: Object
  • Default: {}

Possible to add an image in the center.

Example:

 {
    src: string
    width: number
    height: number
  }

Please comment and share this GitHub repository and wants to add or submit your repository WhatsApp us.

Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 228

Newsletter Updates

Enter your email address below to subscribe to our newsletter