https://github.com/khalby786/vue-utterances
Vue.js component for 🔮 utterances 🔮
https://github.com/khalby786/vue-utterances
utterances vue vue-component vue-sfc-rollup vue-utterances vue3
Last synced: about 1 month ago
JSON representation
Vue.js component for 🔮 utterances 🔮
- Host: GitHub
- URL: https://github.com/khalby786/vue-utterances
- Owner: khalby786
- License: mit
- Created: 2021-03-26T06:55:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T04:10:21.000Z (almost 3 years ago)
- Last Synced: 2025-04-11T18:04:21.649Z (about 1 month ago)
- Topics: utterances, vue, vue-component, vue-sfc-rollup, vue-utterances, vue3
- Language: JavaScript
- Homepage: https://vue-utterances.js.org/
- Size: 20.5 KB
- Stars: 20
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-utterances 🔮
[](https://npmjs.org/package/vue-utterances)
Vue.js component for 🔮 [utterances](https://utteranc.es/) 🔮
Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more. Read more at [https://utteranc.es/](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)
```vue
import VueUtterances from "vue-utterances";
export default {
...
components: {
VueUtterances
}
...
}
```
### Browser (with CDN)
```html
```
```js
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](https://utteranc.es/#heading-repository). | 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](https://utteranc.es/#heading-mapping). | No | `pathname` |
| `label` | String | Choose the label that will be assigned to issues created by Utterances. More details [here](https://utteranc.es/#heading-issue-label). | No | |
## Confession
I've never published a Vue component to NPM for public use and it's my first time. I followed [this](https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/) 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](https://github.com/khalby786/vue-utterances/blob/main/LICENSE) - [Khaleel Gibran](https://khaleelgibran.com)