Build Engaging Mobile Lottery Games with NutUI‑Bingo Vue Component Library

Introduction

NutUI‑Bingo is a mobile‑focused component library built on Vue 3.0 that provides ready‑made lottery widgets for marketing activities and mini‑games.

Development Background

Marketing scenarios increasingly require interactive mechanisms such as new‑user tasks, post‑purchase draws, and holiday promotions to boost user engagement and conversion. The library consolidates common lottery cases into a unified component suite.

Design and Architecture

The library follows NutUI’s architecture and scaffolding. Components are first developed for Vue 3 to ensure stability, then gradually adapted for WeChat mini‑programs. Twelve components are planned, each offering configurable prize pools, custom styles, callbacks, animation timing, and rotation frequency.

Installation

Install the package with npm or yarn: npm i @nutui/nutui-bingo Import the full library in the entry file:

import { createApp } from "vue";
import App from "./App.vue";
import NutBig from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(NutBig).mount("#app");

For on‑demand loading, import a specific component, e.g., Turntable:

import { createApp } from "vue";
import App from "./App.vue";
import { Turntable } from "@nutui/nutui-bingo";
import "@nutui/nutui-bingo/dist/style.css";
createApp(App).use(Turntable).mount("#app");

Example: Turntable Game

Register the component and use it in a template:

import { createApp } from 'vue';
import { Turntable } from '@nutui/nutui-bingo';
const app = createApp();
app.use(Turntable);

<nutbig-turntable
  class="turntable"
  :prize-list="prizeList"
  :turns-number="turnsNumber"
></nutbig-turntable>

The prize-list prop receives an array of prize objects; turns-number sets how many rotations the wheel makes before stopping; turns-time adjusts the rotation duration.

const prizeList = ref([
  {
    id: 'xxx',
    prizeName: 'xxxx',
    prizeImg: 'image_url'
  }
]);

Other Game Types

Flip Card

A flip‑card lottery where developers can configure prize names, images, background graphics, and custom click events. A prize-id callback allows programmatic win determination.

Guess Game

Inspired by the traditional “Three Immortals Return to the Cave” trick. Developers can adjust turns-number for swap count, turns-frequency for bowl speed, and set prize-index for the winning position. Start and end callbacks enable custom logic.

Value and Benefits

Accelerates development of lottery‑related scenarios, reducing cost.

Built with Vue 3, Vite, and modern tooling.

Open to community contributions; suggestions can lead to new components.

Future Outlook

The library will continue iterating, adding more game patterns and gradually supporting mini‑program environments for broader compatibility.

Repository and documentation: https://github.com/jdf2e/nutui-bingo