https://github.com/vitogit/vue-chessboard
Chessboard vue component to load positions, create positions and see threats
https://github.com/vitogit/vue-chessboard
chess chessboard vue vue-chessboard vuejs
Last synced: 4 months ago
JSON representation
Chessboard vue component to load positions, create positions and see threats
- Host: GitHub
- URL: https://github.com/vitogit/vue-chessboard
- Owner: vitogit
- License: gpl-3.0
- Created: 2018-01-26T17:23:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T09:47:51.000Z (over 3 years ago)
- Last Synced: 2025-11-23T14:12:06.916Z (7 months ago)
- Topics: chess, chessboard, vue, vue-chessboard, vuejs
- Language: Vue
- Homepage: http://vitomd.com/vue-chessboard-examples/
- Size: 512 KB
- Stars: 172
- Watchers: 5
- Forks: 50
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue,棋盘 - Chessboard vue组件,用于加载位置,创建位置和查看威胁. (UI组件 / 杂)
- awesome-vue - vue-chessboard ★36 - Chessboard vue component to load positions, create positions and see threats. (UI Components / Miscellaneous)
- awesome-vue - vue-chessboard - Chessboard vue component to load positions, create positions and see threats. (UI Components / Miscellaneous)
- awesome-vue - vue-chessboard - Chessboard vue component to load positions, create positions and see threats ` 📝 a year ago` (UI Components [🔝](#readme))
- awesome-vue - vue-chessboard - Chessboard vue component to load positions, create positions and see threats. (Components & Libraries / UI Components)
README
# vue-chessboard
[ ](https://www.npmjs.com/package/vue-chessboard)
[](https://vuejs.org/)
Chessboard vue component to load positions, create positions and see threats
- It uses [chess.js](https://github.com/jhlywa/chess.js) for chess movements and validations
- It uses chessground for chessboard UI [chessground](https://github.com/ornicar/chessground)
Check live examples: [http://vitomd.com/vue-chessboard-examples/](http://vitomd.com/vue-chessboard-examples/)
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Example](#example)
# Installation
```
npm install --save vue-chessboard
```
## Default component import
```javascript
import {chessboard} from 'vue-chessboard'
import 'vue-chessboard/dist/vue-chessboard.css'
```
Then use it in your template
```html
```
## Browser
```html
new Vue({
el: '#app',
components: {
VueChessboard
}
});
```
# Examples
Check live examples: [http://vitomd.com/vue-chessboard-examples/](http://vitomd.com/vue-chessboard-examples/)
Check live examples repository: [https://github.com/vitogit/vue-chessboard-examples](https://github.com/vitogit/vue-chessboard-examples)
Check full application using the component: [Chess Guardian](http://vitomd.com/vue-chess-guardian/)
#### Simple Chessboard with legal moves
```html
```
#### Simple Chessboard with free moves
```html
```
#### Simple Chessboard with black orientation. Default is white
```html
```
#### Simple Chessboard that shows threats for current position and player
```html
```
#### Fen binded to the chessboard (load position when click on a new position)
```html
{{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.
```html
{{this.positionInfo}}
```
```js
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
```html
```
```js
promote() {
return 'r' // This will promote to a rook
}
```
#### Extended Component (Play vs random AI).
You can extend the chessboard component to add new methods
```html
// newboard.vue
import { chessboard } from 'vue-chessboard'
export default {
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 simplicity
this.board.set({
fen: this.game.fen()
})
this.calculatePromotions()
this.aiNextMove()
};
},
aiNextMove() {
let moves = this.game.moves({verbose: true})
let randomMove = 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()} },
})
}
}
```
---
## Want to see all my chess related projects?
Check [My projects](http://vitomd.com/blog/projects/) for a full detailed list.
## License
GPL-3.0