vue3-chessboard

Appearance

Available Events ​

Events ​

  • boardCreated - emitted when the board is created and the boardAPI is available
  • checkmate - emitted when one player is mated
  • stalemate - emitted when the game ends in stalemate
  • draw - emitted when the game ends in a draw
  • check - emitted when one player is in check
  • promotion - emitted when a pawn is promoted
  • move - emitted when a move is made

Here you can see the vue.js defineEmits:

ts
const emit = defineEmits<{
  (e: 'boardCreated', boardApi: BoardApi): void; // emits boardAPI
  (e: 'checkmate', isMated: PieceColor): void; // emits the color of the mated player
  (e: 'stalemate'): void; // just emits stalemate, the value is not interesting
  (e: 'draw'): void; // same for draw
  (e: 'check', isInCheck: PieceColor): void; // emits color who is in check
  (e: 'promotion', promotion: PromotionEvent): void; // emits information about the promotion
  (e: 'move', move: MoveEvent): void; // emits information about the move
}>();

Listening for Events ​

In the following examples you will see an alert when an event was emitted.
Hit the play button, to see the events in action.

Check ​

vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleCheck(isInCheck) {
  alert(`${isInCheck} is in Check`);
}
</script>

<template>
  <TheChessboard @check="handleCheck" />
</template>
vue
<script setup lang="ts">
import { TheChessboard, type PieceColor } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleCheck(isInCheck: PieceColor) {
  alert(`${isInCheck} is in Check`);
}
</script>

<template>
  <TheChessboard @check="handleCheck" />
</template>

Move ​

You can listen of moves on the board and get information about the move

vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleMove(move) {
  console.log(move);
}
</script>

<template>
  <TheChessboard @move="handleMove" />
</template>
vue
<script setup lang="ts">
import { TheChessboard, type MoveEvent } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleMove(move: MoveEvent) {
  console.log(move);
}
</script>

<template>
  <TheChessboard @move="handleMove" />
</template>

Emitted values:

Checkmate ​
vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleCheckmate(isMated) {
  alert(`${isMated} is mated`);
}
</script>

<template>
  <TheChessboard @checkmate="handleCheckmate" />
</template>
vue
<script setup lang="ts">
import { TheChessboard, type PieceColor } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleCheckmate(isMated: PieceColor) {
  alert(`${isMated} is mated`);
}
</script>

<template>
  <TheChessboard @checkmate="handleCheckmate" />
</template>
Promotion ​
vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handlePromotion(promotion) {
  console.log(promotion);
}
</script>

<template>
  <TheChessboard @promotion="handlePromotion" />
</template>
vue
<script setup lang="ts">
import { TheChessboard, type PromotionEvent } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handlePromotion(promotion: PromotionEvent) {
  console.log(promotion);
}
</script>

<template>
  <TheChessboard @promotion="handlePromotion" />
</template>
Promotion: 
Stalemate ​
vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleStalemate() {
  alert('Stalemate');
}
</script>

<template>
  <TheChessboard @stalemate="handleStalemate" />
</template>
vue
<script setup lang="ts">
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleStalemate() {
  alert('Stalemate');
}
</script>

<template>
  <TheChessboard @stalemate="handleStalemate" />
</template>
Alfonso Romero Holmes vs Boris Kantsler (2002)
Draw ​
vue
<script setup>
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleDraw() {
  alert('Draw');
}
</script>

<template>
  <TheChessboard @draw="handleDraw" />
</template>
vue
<script setup lang="ts">
import { TheChessboard } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

function handleDraw() {
  alert('Draw');
}
</script>

<template>
  <TheChessboard @draw="handleDraw" />
</template>
Magnus Carlsen vs Viswanathan Anand (World Championship Match 2014)