Touch-enabled Spin Wheel In Vue

A fancy Vue.js component to create a spin wheel that is fully interactive with mouse drag and touch events.

How to use it:

1. Import components from ‘vue-spin-wheel’.

import { SpinWheel, SpinCircle, SpinItem } from "vue-spin-wheel";

2. Import the necessary stylesheet.

import 'vue-spin-wheel/lib/vue-spin-wheel.css';

3. Add the spin wheel component together with controls to the template.

  <div id="app">
    <spin-wheel v-slot="{ angle }" class="flower">
      <spin-circle :items="items" :gravity="hasGravity">
        <template v-slot:bubble="{ item }">
          <spin-item :rotation="angle" class="bubble">
        <template v-slot:center>
          <spin-item :rotation="angle" class="bubble">
    <div class="actions">
      <button @click="addItem">Add item</button>
      <button @click="removeItem">Remove item</button>
      <input type="checkbox" v-model="hasGravity" name="gravity">
      <label for="gravity">Gravity</label>

4. Register the component and enable the controls.

export default {
  name: "App",
  components: {
  data: function() {
    return {
      items: ["HELLO", "THERE", "GENERAL", "KENOBI"],
      hasGravity: true,
      index: 0
  methods: {
    removeItem: function() {
    addItem: function() {


Touch-enabled Spin Wheel In Vue


v1.2.0 (07/30/2022)

  • Removed ts-matrix dependency. Use native javascript Math methods now.

v1.1.0 (02/05/2022)

  • New itemKey prop on SpinItem to indicate which property of the item to use as a uniq key (used for v-for)
  • Fixed height computation problems when the container only use min-height and doesn’t specify height.

Download Details:

Author: Kapcash

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-spin-wheel

$ npm install vue-spin-wheel --save

Add Comment