{"id":26614,"library":"vue-fortune-wheel","title":"Vue Fortune Wheel","description":"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.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","wheel-of-fortune","vue-wheel-of-fortune","vue-lucky-wheel","vue-luckywheel","vue-wheel","vue-turntable","vue-turnplate","vue转盘"],"install":[{"cmd":"npm install vue-fortune-wheel","lang":"bash","label":"npm"},{"cmd":"yarn add vue-fortune-wheel","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-fortune-wheel","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"core framework dependency","package":"vue","optional":false}],"imports":[{"note":"Default export only; named import will not work.","wrong":"import { FortuneWheel } from 'vue-fortune-wheel'","symbol":"FortuneWheel","correct":"import FortuneWheel from 'vue-fortune-wheel'"},{"note":"Style file path is not under dist; must use exact path 'vue-fortune-wheel/style.css'.","wrong":"import 'vue-fortune-wheel/dist/style.css'","symbol":"FortuneWheel component (style)","correct":"import 'vue-fortune-wheel/style.css'"},{"note":"CommonJS users must access .default; the module uses ESM exports.","wrong":"const FortuneWheel = require('vue-fortune-wheel')","symbol":"FortuneWheel via CommonJS","correct":"const FortuneWheel = require('vue-fortune-wheel').default"}],"quickstart":{"code":"<template>\n  <div>\n    <FortuneWheel\n      style=\"width: 500px; max-width: 100%;\"\n      ref=\"wheelEl\"\n      :prizes=\"prizes\"\n      @rotateEnd=\"onRotateEnd\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport FortuneWheel from 'vue-fortune-wheel'\nimport 'vue-fortune-wheel/style.css'\n\nconst prizeId = ref(0)\n\nconst prizes = [\n  { id: 1, name: 'Prize 1', value: 'prize1', bgColor: '#ff0', color: '#000', probability: 30 },\n  { id: 2, name: 'Prize 2', value: 'prize2', bgColor: '#f00', color: '#fff', probability: 40 },\n  { id: 3, name: 'Prize 3', value: 'prize3', bgColor: '#0f0', color: '#000', probability: 30 }\n]\n\nconst wheelEl = ref()\n\nfunction onRotateEnd (prize: any) {\n  console.log('You won:', prize.value)\n}\n</script>","lang":"typescript","description":"Basic usage of vue-fortune-wheel with canvas mode, demonstrating required imports, prize setup, and rotate end event handling."},"warnings":[{"fix":"For Vue 2 projects, use 'npm install vue-fortune-wheel@1' or switch to Vue 3.","message":"Version 2.x drops support for Vue 2. Vue 2 users must use the vue2 branch or install version 1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure all prize objects have 'id' as positive integer (e.g., 1, 2, 3).","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If using weighted mode, ensure each prize has a 'weight' integer field. Otherwise, set 'useWeight' to false.","message":"When using 'type=\"image\"', 'prizes' items must include 'weight' if 'useWeight' is true; the 'probability' field is ignored in that mode.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use template ref: <FortuneWheel ref=\"wheelEl\" /> then wheelEl.value.startRotate()","message":"The component's 'startRotate' method must be called on the wheel ref; it is not available on the component default export.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Update to use boolean value for 'verify' prop.","message":"In version 2.x, the 'verify' prop is a boolean; previously in 1.x it may have accepted different types.","severity":"deprecated","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use template ref: <FortuneWheel ref=\"wheelEl\" /> then access 'wheelEl.value.startRotate()'","cause":"Trying to call 'startRotate' on the default import instead of a component instance ref.","error":"Cannot read properties of undefined (reading 'startRotate')"},{"fix":"Use import 'vue-fortune-wheel/style.css'","cause":"Incorrect path to styles; style file is at package root, not under 'dist'.","error":"Module not found: Error: Can't resolve 'vue-fortune-wheel/style.css'"},{"fix":"Use import FortuneWheel from 'vue-fortune-wheel'","cause":"Using named import syntax (import { FortuneWheel }) instead of default import.","error":"export 'default' (imported as 'FortuneWheel') was not found in 'vue-fortune-wheel'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}