Vue3-fortune-wheel NPM

vue3-fortune-wheel v2.0.5

👊 An easy-to-use fortune wheel component for Vue.js 3 👊

🔥 Built with Vue 3 + TypeScript 🔥

Codesandbox

Preview

vue-1

Features

Customizable wheel segments
Animated spinning
Optional center image
TypeScript support
Accessible (with ARIA attributes)

Installation

pnpm add vue3-fortune-wheel

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { FortuneWheel } from 'vue3-fortune-wheel'
import type { Data, ImgParams } from 'vue3-fortune-wheel'

const gift = ref(2)
const wheel = ref<InstanceType<typeof FortuneWheel> | null>(null)
const data = ref<Data[]>([
  { id: 1, value: 'Gift 1', bgColor: '#7d7db3', color: '#ffffff' },
  { id: 2, value: 'Gift 2', bgColor: '#ffffff', color: '#000000' }
])

// Optional: Center image
const logo: ImgParams = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png',
  width: 100,
  height: 120
}

const hasMiddleCircle = true

const done = (result: Data) => {
  console.log('Spin completed:', result)
}
</script>

<template>
  <FortuneWheel
    ref="wheel"
    v-model="gift"
    :middle-circle="hasMiddleCircle"
    :img-params="logo"
    :data="data"
    @done="done"
  />
</template>

API

Props

Prop	Type	Default	Description
v-model	`number`	`null`	ID of the winning item
data	`Data[]`	`[]`	Array of wheel segments
animDuration	`number`	`5000`	Spin animation duration in milliseconds
imgParams	`ImgParams`	`{}`	Configuration for center image (optional)
middleCircle	`boolean`	`true`	Show/hide middle circle

Events

Event	Payload	Description
done	`Data`	Emitted when the spin is completed

Methods

Method	Description
spin()	Starts the wheel spin

Types

interface Data {
  id: number
  value: string
  color: string
  bgColor: string
}

interface ImgParams {
  src: string
  width: number
  height: number
}

Spinning the Wheel

Use the ref to call the spin method:

const wheel = ref<InstanceType<typeof FortuneWheel> | null>(null)

const launchWheel = () => {
  wheel.value?.spin()
}

Customization

Random Winner Selection

If you need to randomly select a winner, you can use a method like this:

const randomGift = () => {
  return Math.floor(Math.random() * data.value.length) + 1
}

Development

Setup

Fork the repository
Clone your fork: git clone https://github.com/YOUR_USERNAME/vue3-fortune-wheel.git
Install dependencies: pnpm install

Running Tests

pnpm run test:unit

Contributing

Create an issue describing the feature or bug
Fork the repo and create a branch following the gitflow convention:
- Feature branches: feature/issueId
- Release branches: release/issueId
- Hotfix branches: hotfix/issueId
- Support branches: support/issueId
Make your changes and push to your fork
Open a pull request to the main repository