rayokota / vue-chessboard-examples

Examples for the vue-chessboard component for Vue.js

vue-chessboard-examples

Examples for the vue-chessboard component

Examples

Check live examples: http://vitomd.com/vue-chessboard-examples/

Check full application using the component: Chess Guardian

Simple Chessboard with legal moves

  <chessboard/>

Simple Chessboard with free moves

  <chessboard :free="true"/>

Simple Chessboard that shows threats for current position and player

  <chessboard :showThreats="true"/>

Fen binded to the chessboard (load position when click on a new position)

  <chessboard :fen="currentFen"/>
  <button class="button is-light" @click="loadFen(fen)" v-for="fen in fens">
    {{fen}}
  </button>

Chessboard with onmove callback. Returns positional info { "legal_black": 20, "checks_black": 0, "threat_black": 0, "turn": "black" } after each move.

  <chessboard @onMove="showInfo"/>
  <div>
    {{this.positionInfo}}
  </div>

showInfo(data) {
  this.positionInfo = data
}

Chessboard with onpromote callback

When there is a promotion it will execute the callback. Just return the first letter of the piece: q:Queen, r:Rook, k:Knight, b:Bishop

  <chessboard :onPromotion="promote"/>

promote() {
  return 'r' // This will promote to a rook
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build