Vue3 fortune wheel is an easy-to-use fortune wheel component for Vue.js 3 and is written in TypeScript.

Must read: A Free Online Spinning Wheel App Written in jQuery | Lucky Spin

How to make use of it:

Installation:

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

import { Wheel } from "vue3-fortune-wheel";
import type { Datas, imgParams } from "vue3-fortune-wheel";

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

<Wheel
  :gift="gift"
  :imgParams="logo"
  @done="done"
  ref="wheel"
  v-model="data"
/>

Usage

<template>
  <Wheel
    :gift="gift"
    :imgParams="logo"
    @done="done"
    ref="wheel"
    v-model="data"
  />
</template>

<script>
export default defineComponent({
  setup() {
    const wheel = ref(null);
    const launchWheel = () => {
      wheel.value.spin();
    };
    
    return { launchWheel }
  }
})
<script>

Props/Options

Gift

• Type: Number
• Default: null

animDuration

• Type: Number
• Default: 5000

How many milliseconds do you want the wheel to turn

Must Read: Angular Prize-Winning Spinning Wheel Javascript | ngx-wheel

Data

• Type: Array
• Default: []

• id: number
• value: string
• color: string
• bgColor: string

ImgParams

• Type: Object
• Default: {}

See Also –

Canvas-Based JavaScript UI Element Implementing Touch, Keyboard, Mouse, and Scroll Wheel Support
Simple Design and Smooth Interface on PC / Mobile Browser | Simple Wheel Picker
Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

See Demo And Download

Official Website(joffreyBerrier): Click Here

This superior jQuery/javascript plugin is developed by joffreyBerrier. For extra Advanced Usage, please go to the official website.