Vue PGN Viewer

Vue 3 adapter for the official Lichess PGN Viewer

Features

• Easy integration with Vue 3 projects
• Supports all Lichess PGN Viewer features
• Fully typed configuration and API
• Props/emits autocompletion support

Installation

npm install vue-pgn-viewer
# or
yarn add vue-pgn-viewer
# or
pnpm add vue-pgn-viewer

Quick Start

1. Import the styles in your main entry file:

// main.js or main.ts
import "vue-pgn-viewer/style.css";

2. Register the component:

Locally (in any Single-File Component):

<script setup>
import { PgnViewer } from "vue-pgn-viewer";
</script>

Or globally (in your main entry file):

import { PgnViewer } from "vue-pgn-viewer";
app.component("PgnViewer", PgnViewer);

3. Use the component in your template:

<template>
    <PgnViewer
        :config="{
            pgn: '1. f3 e5 2. g4 Qh4#',
            orientation: 'black',
        }"
    />
</template>

Config

The library exports the PgnViewerConfig type for defining config objects separately.

Example:

<script setup lang="ts">
import { PgnViewer, type PgnViewerConfig } from "vue-pgn-viewer";

const config: PgnViewerConfig = {
    pgn: "1. e4 e5 2. Nf3 Nc6 3. Bc4 Nf6 4. Ng5 d5 5. exd5 b5",
    drawArrows: false,
    chessground: {
        coordinates: false,
        animation: {
            enabled: true,
            duration: 500
        }
    }
};
</script>

<template>
    <PgnViewer :config="config" />
</template>

For all configuration options, see the documented source code (Lichess).

API

The component emits a ready event when mounted and exposes an API for direct manipulation.
The library exports the PgnViewerApi type.

<script setup lang="ts">
import { PgnViewer, type PgnViewerApi } from "vue-pgn-viewer";

function useApi(api: PgnViewerApi) {
    api.flip();
    api.toggleMenu();
}
</script>

<template>
    <PgnViewer @ready="useApi" />
</template>

For all API options, see the source code.

Limitations

PGN viewer widget is designed to be embedded in content pages.
This won't replace a fully featured analysis board.

For more flexible functionality, consider:

• lichess-org/chessground
• qwerty084/vue3-chessboard, which is a wrapper around "chessground"