vue-utterances 🔮
Vue.js component for 🔮 utterances 🔮
Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. Read more at https://utteranc.es/.
This package is under active development! If you encounter bugs, please open an issue at https://github.com/khalby786/vue-utterances/issues.
Installation
npm i vue-utterances
This package is compatible only with Vue 3.
Usage
Vue CLI (with a Bundler)
<template>
<vue-utterances repo="khalby786/vue-utterances" theme="github-light" issue-term="pathname" />
</template>
<script>
import VueUtterances from "vue-utterances";
export default {
...
components: {
VueUtterances
}
...
}
</script>Browser (with CDN)
<div id="app">
<vue-utterances repo="khalby786/vue-utterances" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-utterances@0.1.2/dist/vue-utterances.min.js"></script>const app = {
components: {
VueUtterances
}
}
Vue.createApp(app).mount("#app");Props
| Prop | Type | Description | Required | Default |
|---|---|---|---|---|
repo |
String | Repository for Utterances to connect to. Expected value: username/repo. More details here. |
Yes | - |
theme |
String | The Utterance theme to use. github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue, photon-dark and boxy-light are the expected values. |
No | github-light |
issue-term |
String | The mapping between blog posts and GitHub issues. pathname, url, title, og:title, [SPECIFIC ISSUE NUMBER] and [SPECIFIC SEARCH TERM] are the expected values. More details here. |
No | pathname |
label |
String | Choose the label that will be assigned to issues created by Utterances. More details here. | No |
Confession
I've never published a Vue component to NPM for public use and it's my first time. I followed this tutorial to create this component package. I'm not familiar with the entire concept (yet), and I might be doing some things the wrong way, so if you feel like something needs correction or can be improved further, please create an issue/pull request!