vue-chessboard
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
Check live examples: http://vitomd.com/vue-chessboard-examples/
Table of contents
Installation
npm install --save vue-chessboard
Default component import
Then use it in your template
Browser
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
#### Simple Chessboard with free moves
#### Simple Chessboard with black orientation. Default is white
#### Simple Chessboard that shows threats for current position and player
#### Fen binded to the chessboard (load position when click on a new position)
{{fen}}
#### 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.
{{this.positionInfo}}
{ thispositionInfo = 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
{ return 'r' // This will promote to a rook}
#### Extended Component (Play vs random AI).
You can extend the chessboard component to add new methods
// newboard.vue
Want to see all my chess related projects?
Check My projects for a full detailed list.
License
GPL-3.0