VitePress Plugin Utterances

Appearance

VitePress Plugin Utterances

Add Utterances (GitHub Issues) comments to your VitePress site

Example
GitHub

GitHub Issues Comments

Use GitHub issues as a lightweight commenting system via Utterances.

Easy Integration

Minimal setup. Works with VitePress slots and dark/light theme out of the box.

Open Source & No Tracking

Powered by Utterances — no ads, no tracking, and data lives in your repo.

Install ​

bash
npm install vitepress-plugin-utterances
bash
yarn add vitepress-plugin-utterances
bash
pnpm add vitepress-plugin-utterances
bash
bun install vitepress-plugin-utterances

Setup ​

ts
import VPUtterances from 'vitepress-plugin-utterances'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.use(VPUtterances, { 
      // componentName: 'Utterances', // Optionally, customize the component name.
    }) 
  },
}

Usage ​

Add the <Utterances /> component to your markdown files.

markdown
# My Page

<Utterances repo="utterance/utterances" issue-term="homepage" />
  • repo (required): "owner/repo" of the repository where issues will be created/read.
  • issueTerm: "pathname" | "url" | "title" | "og:title" | string. Default: "pathname".
  • label: optional label for created issues.
  • theme: Utterances theme (e.g. "github-light", "github-dark").
  • crossorigin: "anonymous" (default) | "use-credentials".

How it works ​

  • The widget searches for an existing GitHub issue for the current page using url, pathname, or title.
  • If no matching issue is found, utterances-bot automatically creates one when someone comments.
  • Users authenticate via GitHub OAuth to comment, or they can comment directly on the GitHub issue.

More info ​

Visit the Utterances website for more details:

Example ​

<Utterances repo="enzonotario/vitepress-plugin-utterances" issue-term="homepage" />