Vue Fortune Wheel

raw JSON →
2.1.0 verified Fri May 01 auth: no javascript

A Vue 3 component for creating a customizable 'Wheel of Fortune' style lottery spinner. Current stable version is 2.1.0. It supports both canvas and image rendering modes, with features like weighted prizes, custom styling via slots, verification callbacks, and TypeScript support. Distinguished by its dual rendering approach and simple API. Peer dependency on vue ^3.2.0. Actively maintained with a vue2 branch available.

Common errors

error Cannot read properties of undefined (reading 'startRotate') ↓
cause Trying to call 'startRotate' on the default import instead of a component instance ref.
fix
Use template ref: <FortuneWheel ref="wheelEl" /> then access 'wheelEl.value.startRotate()'
error Module not found: Error: Can't resolve 'vue-fortune-wheel/style.css' ↓
cause Incorrect path to styles; style file is at package root, not under 'dist'.
fix
Use import 'vue-fortune-wheel/style.css'
error export 'default' (imported as 'FortuneWheel') was not found in 'vue-fortune-wheel' ↓
cause Using named import syntax (import { FortuneWheel }) instead of default import.
fix
Use import FortuneWheel from 'vue-fortune-wheel'

Warnings

breaking Version 2.x drops support for Vue 2. Vue 2 users must use the vue2 branch or install version 1.x. ↓
fix For Vue 2 projects, use 'npm install vue-fortune-wheel@1' or switch to Vue 3.
gotcha The 'prizes' array requires each item to have an 'id' field that is an integer greater than 0. Using 0 or negative values can cause unexpected behavior. ↓
fix Ensure all prize objects have 'id' as positive integer (e.g., 1, 2, 3).
gotcha When using 'type="image"', 'prizes' items must include 'weight' if 'useWeight' is true; the 'probability' field is ignored in that mode. ↓
fix If using weighted mode, ensure each prize has a 'weight' integer field. Otherwise, set 'useWeight' to false.
gotcha The component's 'startRotate' method must be called on the wheel ref; it is not available on the component default export. ↓
fix Use template ref: <FortuneWheel ref="wheelEl" /> then wheelEl.value.startRotate()
deprecated In version 2.x, the 'verify' prop is a boolean; previously in 1.x it may have accepted different types. ↓
fix Update to use boolean value for 'verify' prop.

Install

npm install vue-fortune-wheel
yarn add vue-fortune-wheel
pnpm add vue-fortune-wheel

Imports

Quickstart

Basic usage of vue-fortune-wheel with canvas mode, demonstrating required imports, prize setup, and rotate end event handling.

<template>
  <div>
    <FortuneWheel
      style="width: 500px; max-width: 100%;"
      ref="wheelEl"
      :prizes="prizes"
      @rotateEnd="onRotateEnd"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FortuneWheel from 'vue-fortune-wheel'
import 'vue-fortune-wheel/style.css'

const prizeId = ref(0)

const prizes = [
  { id: 1, name: 'Prize 1', value: 'prize1', bgColor: '#ff0', color: '#000', probability: 30 },
  { id: 2, name: 'Prize 2', value: 'prize2', bgColor: '#f00', color: '#fff', probability: 40 },
  { id: 3, name: 'Prize 3', value: 'prize3', bgColor: '#0f0', color: '#000', probability: 30 }
]

const wheelEl = ref()

function onRotateEnd (prize: any) {
  console.log('You won:', prize.value)
}
</script>
last verified Fri May 01
next check Thu Jul 30