Skip to content

khalby786/vue-utterances

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-utterances 🔮

NPM

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