Table of contents

Installation

npm install --save vue-chessboard

Default component import

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

<chessboard/>

Browser

<divid="app"><chessboard></chessboard></div><linkrel="stylesheet"href="vue-chessboard/dist/vue-chessboard.css"/><scriptsrc="vue.js"></script><scriptsrc="vue-chessboard/dist/vue-chessboard.browser.js"></script><script>newVue({el:'#app',components:{    VueChessboard}});</script>

Examples

Simple Chessboard with legal moves

<chessboard/>

Simple Chessboard with free moves

<chessboard:free="true"/>

Simple Chessboard with black orientation. Default is white

<chessboardorientation="black"/>

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"/><buttonclass="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

<chessboard:onPromotion="promote"/>

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

Extended Component (Play vs random AI).

  // newboard.vue<script>import{chessboard}from'vue-chessboard'exportdefault{name:'newboard',extends:chessboard,methods:{userPlay(){return(orig,dest)=>{if(this.isPromotion(orig,dest)){this.promoteTo=this.onPromotion()}this.game.move({from:orig,to:dest,promotion:this.promoteTo})// promote to queen for simplicitythis.board.set({fen:this.game.fen()})this.calculatePromotions()this.aiNextMove()};},aiNextMove(){letmoves=this.game.moves({verbose:true})letrandomMove=moves[Math.floor(Math.random()*moves.length)]this.game.move(randomMove)this.board.set({fen:this.game.fen(),turnColor:this.toColor(),movable:{color:this.toColor(),dests:this.possibleMoves(),events:{after:this.userPlay()},}});},},mounted(){this.board.set({movable:{events:{after:this.userPlay()}},})}}</script>

Want to see all my chess related projects?

License