Board Created

When the board component is mounted the board-created event is being emitted. In this event the boardAPI is included, which you can use to modify and extract data from the board through it's methods.

Definition

defineEmits<{
  (e: 'board-created', boardApi: BoardApi): void;
}>();

Full reference of all methods: Board API Docs | Source Code

Example

JavaScript

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

let boardApi;

// access the boardAPI in the onMounted hook
onMounted(() => {
  console.log(boardApi?.getBoardPosition());
});
</script>

<template>
  <TheChessboard @board-created="(api) => (boardApi = api)" />
</template>

TypeScript

<script setup lang="ts">
import { onMounted } from 'vue';
import { TheChessboard, type BoardApi } from 'vue3-chessboard';
import 'vue3-chessboard/style.css';

let boardApi: BoardApi | undefined;

// access the boardAPI in the onMounted hook
onMounted(() => {
  console.log(boardApi?.getBoardPosition());
});
</script>

<template>
  <TheChessboard @board-created="(api) => (boardApi = api)" />
</template>