An Easier Spinning Fortune Wheel Animation For Vue 3

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:


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: {



export default defineComponent({
  setup() {
    const wheel = ref(null);
    const launchWheel = () => {
    return { launchWheel }



  • Type: Number
  • Default: null


  • Type: Number
  • Default: 5000

How many milliseconds do you want the wheel to turn

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


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


  • 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.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…


Responsive Accordion UI Design using HTML CSS and JavaScript

Responsive Accordion is a responsive and beautiful-looking accordion user interface with smooth transitions. Designed with HTML, CSS (SCSS), and a bit of JavaScript. Stunning accordion user interface…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…