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.
npm i vue-utterances
This package is compatible only with Vue 3.
<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>
<div id="app">
<vue-utterances repo="khalby786/vue-utterances" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-utterances.min.js"></script>
const app = {
components: {
VueUtterances
}
}
Vue.createApp(app).mount("#app");
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 |
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!