https://github.com/qwerty084/vue3-chessboard
Vue 3 chessboard component, built with lichess chessground and chess.js
https://github.com/qwerty084/vue3-chessboard
chess chessboard typescript vue vuejs
Last synced: about 1 month ago
JSON representation
Vue 3 chessboard component, built with lichess chessground and chess.js
- Host: GitHub
- URL: https://github.com/qwerty084/vue3-chessboard
- Owner: qwerty084
- License: gpl-3.0
- Created: 2022-10-02T15:55:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-12T21:43:16.000Z (6 months ago)
- Last Synced: 2025-05-02T09:06:11.198Z (about 1 month ago)
- Topics: chess, chessboard, typescript, vue, vuejs
- Language: Vue
- Homepage: https://qwerty084.github.io/vue3-chessboard-docs/
- Size: 1.33 MB
- Stars: 79
- Watchers: 6
- Forks: 21
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue3-chessboard
[](https://github.com/qwerty084/vue3-chessboard/actions/workflows/tests.yml)
[](https://github.com/qwerty084/vue3-chessboard/actions/workflows/codeql.yml)
[](https://www.npmjs.com/package/vue3-chessboard)
vue3-chesssboard is a component library for vue 3 built with [lichess chessground](https://github.com/lichess-org/chessground) & [chess.js](https://github.com/jhlywa/chess.js).
You can find a demo and the full library documentation [here](https://qwerty084.github.io/vue3-chessboard-docs/).
## Table of contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Docs](#docs)
# Features:
- Customizable chessboard
- Custom Events for check, checkmate, draw, move etc.
- Undo Moves, reset game, get opening name, get current fen...
- Promotion dialog window
- Fully typed API/Custom Events
# Installation
```
npm i vue3-chessboard
```
# Usage
Basic Example (Composition API)
```html
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';
```
Basic Example (Options API)
```html
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';
export default {
components: {
TheChessboard,
},
};
```
Example Typescript Component
```html
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';
import type { BoardApi, BoardConfig } from 'vue3-chessboard';
let boardAPI: BoardApi;
const boardConfig: BoardConfig = {
coordinates: true,
};
function handleCheckmate(isMated: string) {
if (isMated === 'w') {
alert('Black wins!');
} else {
alert('White wins!');
}
}
Toggle orientation
Reset
Undo
Threats
(boardAPI = api)"
@checkmate="handleCheckmate"
/>
```
Example Javascript Component
```html
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';
let boardAPI;
const boardConfig = {
coordinates: true,
};
function handleCheckmate(isMated) {
if (isMated === 'w') {
alert('Black wins!');
} else {
alert('White wins!');
}
}
Toggle orientation
Reset
Undo
Threats
(boardAPI = api)"
@checkmate="handleCheckmate"
/>
```
# Docs
You can find the full documentation [here](https://qwerty084.github.io/vue3-chessboard-docs/).
## Setup:
- Just install the package and import the component in your project, like shown above.
- Don't forget to include the stylesheet:
`import 'vue3-chessboard/style.css';`
### Chessboard config
You can pass a config object to the chessboard component to modify the board to your needs, as a prop (:board-config). The config object is optional and will be merged with the [default config](https://github.com/qwerty084/vue3-chessboard/blob/main/src/helper/DefaultConfig.ts).
The default config is based on the [lichess board config](https://github.com/lichess-org/chessground/blob/master/src/state.ts).
Additionally custom callback functions can be passed to the component.
For example a custom function can be run on piece selection or after each move.
### API
The chessboard component provides an API to interact with the chessboard. The API is accessible via the board-created event. The event will be emitted when the chessboard is created and ready to use.
### Available methods:
For a full list of available methods please visit the [documentation](https://qwerty084.github.io/vue3-chessboard-docs/board-api.html).
### Custom Events
You can listen for events on the chessboard component. The following events are available:
- boardCreated - Emitted when the chessboard is created and the API is ready to use
- checkmate - Emitted when a player is checkmated
- stalemate - Emitted when a player is stalemated
- draw - Emitted when the game is drawn
- check - Emitted when a player is checked
- promotion - Emitted when a player promotes
- move - Emitted when a player makes a move
```ts
const emit = defineEmits<{
(e: 'boardCreated', boardApi: BoardApi): void;
(e: 'checkmate', isMated: PieceColor): void;
(e: 'stalemate'): void;
(e: 'draw'): void;
(e: 'check', isInCheck: PieceColor): void;
(e: 'promotion', promotion: PromotionEvent): void;
(e: 'move', move: MoveEvent): void;
}>();
```