@putianyi888/vue3-minesweeper-board

Vue 3 component for rendering a Minesweeper board matrix.

Install

npm install @putianyi888/vue3-minesweeper-board vue

Usage

<script setup lang="ts">
import MinesweeperBoard from '@putianyi888/vue3-minesweeper-board'

const board = [
  [10, 10, 10],
  [1, 2, 1],
  [0, 0, 0],
]
</script>

<template>
  <MinesweeperBoard :board="board" :size="24" />
</template>

board follows ms_toollib game board values. Unsupported values render as an unopened background cell with a blank foreground.

You can also import the lower-level layers:

import { BoardBackground, BoardForeground, Counter, MinesweeperBoard } from '@putianyi888/vue3-minesweeper-board'

<Counter :value="12.34" :fixed="2" :digits="3" :size="24" />