A reusable and customizable Vue 3 component to spin a wheel of fortune — perfect for games, giveaways, raffles, or any luck-based mechanic.

✨ Built with ❤️, Vue 3, TypeScript & Tailwind CSS

• 🎯 Fully interactive — Spin the wheel with a button or programmatically
• 🎛 Optional user controls — Let users edit segment values and colors directly in the UI
• 🏆 Optional winner display — Automatically shows the selected segment after spinning
• 🖱 Optional spin button — Display a built-in "SPIN!" button or trigger manually
• 🎨 Custom or preset segments — Provide your own segments or use built-in presets like:
  • Fibonacci
  • T-shirt sizes (S, M, L, XL…)
  • Yes/No/Maybe
  • ...

pnpm add vue-roue
# or
npm install vue-roue

<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue"
import "vue-roue/style.css"
import VueRoue from "vue-roue"

const segments = [
  { name: "🐱 Cat", color: "#f87171" },
  { name: "🐶 Dog", color: "#60a5fa" },
  { name: "🐔 Chicken", color: "#34d399" }
]

// Or use included preset
import { lunch } from "vue-roue"
const segments = lunch

const wheelRef = ref()

// To spin the wheel programmatically
const spin = () => wheelRef.value?.spin()

const handleWinner = (value: string) => {
  console.log("Winner is:", value)
}
</script>

<template>
  <Roue
    ref="wheelRef"
    :segments="segments"
    :wheel-size="450"
    with-spin-button
    with-winner-display
    with-controls
    @winner="handleWinner"
  />
</template>

Call spin() programmatically using ref:

const wheelRef = ref()
wheelRef.value?.spin()

type HexColor = `#${string}`

type Segment = {
  name: string
  color?: HexColor
}

Clone the repo and run locally:

pnpm install
pnpm dev

Build the package:

pnpm build

Feel free to open a PR if something's missing 🙏