Registry / web-framework / vue-fortune-wheel

vue-fortune-wheel

library2.1.0jsnpmunverified

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.

web-framework

npm install vue-fortune-wheel

package ↗

INSTALL

IMPORT

SIG · VUE-FORTUNE-WHEEL

vue-fortune-wheel

web-frameworkjavascriptv2.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FortuneWheel

✓ import FortuneWheel from 'vue-fortune-wheel'

✗ import { FortuneWheel } from 'vue-fortune-wheel'

Default export only; named import will not work.

FortuneWheel component (style)

✓ import 'vue-fortune-wheel/style.css'

✗ import 'vue-fortune-wheel/dist/style.css'

Style file path is not under dist; must use exact path 'vue-fortune-wheel/style.css'.

FortuneWheel via CommonJS

✓ const FortuneWheel = require('vue-fortune-wheel').default

✗ const FortuneWheel = require('vue-fortune-wheel')

CommonJS users must access .default; the module uses ESM exports.

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>

Debug

Known issues

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

affects: >=2.0.0

gotchaThe '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).

affects: >=2.0.0

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

affects: >=2.0.0

gotchaThe 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()

affects: >=2.0.0

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

affects: <2.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'startRotate')

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()'

Module not found: Error: Can't resolve 'vue-fortune-wheel/style.css'

Incorrect path to styles; style file is at package root, not under 'dist'.

fix

Use import 'vue-fortune-wheel/style.css'

export 'default' (imported as 'FortuneWheel') was not found in 'vue-fortune-wheel'

Using named import syntax (import { FortuneWheel }) instead of default import.

fix

Use import FortuneWheel from 'vue-fortune-wheel'

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

vuerequiredcore framework dependency

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-fortune-wheel ↗