vue-utterances

Vue.js component for Utterances, a lightweight comments widget that uses GitHub issues. Comes with TypeScript support and reactive props.

Installation

npm install vue-utterances

# or pnpm, I've been using it lately and its great
pnpm add vue-utterances

# or yarn, if you feel fancy
yarn add vue-utterances

Usage

Import and register the component in your app or page:

<script setup>
import Utterances from 'vue-utterances';
</script>

<template>
  <Utterances
    repo="owner/repo"
    issueTerm="pathname"
    theme="github-light"
    label="comments"
  />
</template>

Nuxt

Wrap with <client-only> to avoid SSR issues:

<template>
  <client-only>
    <Utterances repo="owner/repo" />
  </client-only>
</template>

Props

| Name | Type | Description | |-----------|----------|--------------------------------------------------| | repo | string | GitHub repo in the format owner/repo | | issueTerm | string | Issue mapping term (e.g., pathname, url, title) | | theme | string | Utterances theme | | label | string | Label for created issues |

Methods

Expose reload() to reload the widget if needed:

const utterancesRef = ref();
utterancesRef.value.reload();

Development

Build the library:

npm run build

Test locally in another app:

npm link

# In your test app:
npm link vue-utterances

License

MIT

Credits

• Utterances - The original comments widget
• How to Create and Publish a Vue Component Library – Update
• jet-ui