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/[email protected]/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!

License

MIT License - Khaleel Gibran