A chess position editor component for Vue JS (>= 3), written in Typescript.

1. With your package manager, add the 'editableboard-vue' package (e.g bun add editableboard-vue)
2. In you main.js add the following content :

import EditableBoardVueComponent from "editableboard-vue";
import "editableboard-vue/dist/style.css";

3. Don't forget to use the component (in the same file), e.g :

createApp(App)
  .use(EditableBoardVueComponent) //add this line
  .use(pinia)
  .use(router);

4. You can use the EditableBoardVue component from any template in your project. E.g :

<EditableBoardVue
  :size="500"
  ref="board"
  :reversed="reversed"
  :white-turn="whiteTurn"
/>

Get the board position Forsyth-Edwards Notation : only returns the first part of the specification, the part related to the board.

This method does not take any parameter and does not return anything.

Sets the current editing piece value, in Forsyth-Edwards Notation. For example : give 'K' for setting white king as the editing value. Also, if you want to define the erase value, simply pass an empty string. The first value, before any call to this method, is the erase value ('').

This method does not return anything.

Sets the position of the board, in Forsyth-Edwards Notation, though only the first part of the string will be taken into account (not even the player type, as you have the property whiteTurn for that purpose). The first value, before any call to this method or any editing from the user, is the standard position of chess.

This method does return anything.

1. Install dependencies : e.g with bun bun install
2. Build : e.g with bun bun run vue-tsc && bun run vite build

Pieces vectors definitions from CBurnett and found on Wikimedia commons.