vue

[utterances-bot]

Vite App

https://utterances-component-58axit393-tomoki-miyauci.vercel.app/vue

[TomokiMiyauci]

utterances-vue-component

Type safety vue component for utterances

[](https://github.com/TomokiMiyauci/utterances-vue-component/actions/workflows/test.yml) [](https://github.com/TomokiMiyauci/utterances-vue-component/releases)   [](https://david-dm.org/TomokiMiyauci/utterances-vue-component) [](https://codecov.io/gh/TomokiMiyauci/utterances-vue-component) [](https://www.codacy.com/gh/TomokiMiyauci/utterances-vue-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-vue-component&utm_campaign=Badge_Grade)     [](./LICENSE) [](https://app.fossa.com/projects/custom%2B26231%2Fgithub.com%2FTomokiMiyauci%2Futterances-component?ref=badge_small)

---

Vue component for utterances 🔮

Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.

:sparkles: Features

• :books: Pure TypeScript and TSX and provides type definition
• :earth_americas: Multiple modules, providing ES modules and Commonjs
• :package: Optimized, super slim size

:zap: Quick view

Locally

Local import of components is recommended. This is a type-safe props.

<template>
  <Utterances
    repo="TomokiMiyauci/utterances-component"
    theme="github-dark"
    issueTerm="pathname"
  />
</template>

<script setup lang="ts">
  import { Utterances } from 'utterances-vue-component'
</script>

Globally

You can also register a component globally. There will be no more type inference for props. If there is no reason to do so, local import is recommended.

import { createApp } from 'vue'
import App from './App.vue'
import { plugin } from 'utterances-vue-component'

createApp(App).use(plugin).mount('#app')

<template>
  <Utterances
    repo="TomokiMiyauci/me"
    issue-term="pathname"
    theme="github-light"
  />
</template>

:dizzy: Install

:package: Node.js

npm i utterances-vue-component
or
yarn add utterances-vue-component

:globe_with_meridians: Browser

The module that bundles the dependencies is obtained from skypack.

import like this:

import { Utterances } from 'https://cdn.skypack.dev/utterances-vue-component'

peerDependency

package	version
vue	^3.0.0

:memo: API

Props

It has a strict type definition. No default value is set to respect the original behavior.

Official document

Name	Type	Description
repo	${String}/${String}	Repository for Utterances to connect to. Expected value: username/repo
theme	Theme	The Utterance theme.
label	string?	Choose the label that will be assigned to issues created by Utterances.
issueTerm	Term | string[]1	The mapping between blog posts and GitHub issues.	One of them2
issueNumber	number	You configure Utterances to load a specific issue by number. Issues are not automatically created.

---

declare type Theme =
  | 'github-light'
  | 'github-dark'
  | 'preferred-color-scheme'
  | 'github-dark-orange'
  | 'icy-dark'
  | 'dark-blue'
  | 'photon-dark'
  | 'boxy-light'
declare type Term = 'pathname' | 'url' | 'title' | 'og:title'

1

If you chose "Issue title contains specific term", specify the specific term as string array.

2

Unfortunately, props in vue cannot be exclusively defined. You can specify either an issueTerm or an issueNumber.

:handshake: Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues.

:seedling: Show your support

Give a ⭐️ if this project helped you!

:bulb: License

Copyright © 2021-present TomokiMiyauci.

Released under the MIT license

[Billybobbonnet]

Lookin good mate