Skip to content
Chessboard vue component to load positions, create positions and see threats
Branch: master
Clone or download
vitogit Merge pull request #5 from dellros8/bugg/freezes-on-mate
Fixed bugg where board freezes on checkmate.
Latest commit 97dc1a7 Jan 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist
src Fixed bugg where board freezes on checkmate. Jan 15, 2019
.babelrc
.eslintignore
.eslintrc.js
.gitignore
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

vue-chessboard

npm npm vue2

Chessboard vue component to load positions, create positions and see threats

  • It uses chess.js for chess movements and validations
  • It uses chessground for chessboard UI chessground

http://g.recordit.co/40JDuy8tAk.gif

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

Table of contents

Installation

npm install --save vue-chessboard

Default component import

import {chessboard} from 'vue-chessboard'
import 'vue-chessboard/dist/vue-chessboard.css'

Then use it in your template

    <chessboard/>

Browser

<div id="app">
  <chessboard></chessboard>
</div>

<link rel="stylesheet" href="vue-chessboard/dist/vue-chessboard.css"/>

<script src="vue.js"></script>
<script src="vue-chessboard/dist/vue-chessboard.browser.js"></script>

<script>
new Vue({
  el: '#app',
  components: {
    VueChessboard
  }
});
</script>

Examples

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

Check live examples repository: https://github.com/vitogit/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.

It also returns the fen and the history data.

  <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
}

Want to see all my chess related projects?

Check My projects for a full detailed list.

License

GPL-3.0

You can’t perform that action at this time.