### Start Development Server

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/CONTRIBUTING.md

Starts the development server to allow for active development and testing.

```sh
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/CONTRIBUTING.md

Installs the necessary project dependencies using npm.

```sh
npm i
```

--------------------------------

### Clone Repository

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/CONTRIBUTING.md

Clones the vue3-chessboard repository from GitHub to your local machine.

```sh
git clone https://github.com/qwerty084/vue3-chessboard.git
```

--------------------------------

### Install vue3-chessboard using npm

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

This command installs the vue3-chessboard package using npm. It's the first step to integrate the chessboard component into your Vue 3 project.

```bash
npm i vue3-chessboard
```

--------------------------------

### Format Code

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/CONTRIBUTING.md

Formats the project's code according to predefined style guidelines using npm.

```sh
npm run format
```

--------------------------------

### Lint Code

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/CONTRIBUTING.md

Runs the linter to check for code quality and potential errors using npm.

```sh
npm run lint
```

--------------------------------

### Vue 3 Chessboard with TypeScript and API Interaction

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

An example of using the TheChessboard component in a TypeScript Vue 3 project. It demonstrates how to get the board API, configure the board (e.g., show coordinates), and handle events like checkmate.

```html
<script setup lang="ts">
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!');
  }
}
</script>

<template>
  <section>
    <div>
      <button @click="boardAPI?.toggleOrientation()">
        Toggle orientation
      </button>
      <button @click="boardAPI?.resetBoard()">Reset</button>
      <button @click="boardAPI?.undoLastMove()">Undo</button>
      <button @click="boardAPI?.toggleMoves()">Threats</button>
    </div>
    <TheChessboard
      :board-config="boardConfig"
      @board-created="(api) => (boardAPI = api)"
      @checkmate="handleCheckmate"
    />
  </section>
</template>
```

--------------------------------

### Basic Vue 3 Chessboard Usage (Composition API)

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

Demonstrates the basic integration of the TheChessboard component in a Vue 3 Composition API setup. It imports the component and its styles, then renders the chessboard.

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

<template>
  <TheChessboard />
</template>
```

--------------------------------

### Vue 3 Chessboard with JavaScript and API Interaction

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

Illustrates using the TheChessboard component in a JavaScript Vue 3 project. This example shows how to access the board's API, set initial configurations, and respond to game events like checkmate.

```html
<script setup>
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!');
  }
}
</script>

<template>
  <section>
    <div>
      <button @click="boardAPI?.toggleOrientation()">
        Toggle orientation
      </button>
      <button @click="boardAPI?.resetBoard()">Reset</button>
      <button @click="boardAPI?.undoLastMove()">Undo</button>
      <button @click="boardAPI?.toggleMoves()">Threats</button>
    </div>
    <TheChessboard
      :board-config="boardConfig"
      @board-created="(api) => (boardAPI = api)"
      @checkmate="handleCheckmate"
    />
  </section>
</template>
```

--------------------------------

### Basic Vue 3 Chessboard Usage (Options API)

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

Shows how to use the TheChessboard component within a Vue 3 Options API structure. It registers the component and includes the necessary CSS import.

```html
<template>
  <TheChessboard />
</template>

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

export default {
  components: {
    TheChessboard,
  },
};
</script>
```

--------------------------------

### Define Chessboard Component Events (TypeScript)

Source: https://github.com/qwerty084/vue3-chessboard/blob/main/README.md

This snippet demonstrates how to define custom events for a Vue 3 component using the `defineEmits` function in TypeScript. It covers events like `boardCreated`, `checkmate`, `stalemate`, `draw`, `check`, `promotion`, and `move`, along with their respective payload types.

```typescript
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;
}>();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.