https://github.com/khalby786/vue-utterances
Vue.js component for 🔮 utterances 🔮
https://github.com/khalby786/vue-utterances
utterances vite vue vue-component vue-utterances vue3
Last synced: 10 months 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 5 years ago)
- Default Branch: 3.x
- Last Pushed: 2025-07-20T13:32:10.000Z (11 months ago)
- Last Synced: 2025-07-29T07:35:35.081Z (10 months ago)
- Topics: utterances, vite, vue, vue-component, vue-utterances, vue3
- Language: Vue
- Homepage: https://vue-utterances.js.org/
- Size: 26.4 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
Vue.js component for [Utterances](https://utteranc.es), a lightweight comments widget that uses GitHub issues. Comes with TypeScript support and reactive props.
## Installation
```bash
npm install vue-utterances
# or pnpm, I've been using it lately and its great
pnpm add vue-utterances
# or yarn, if you feel fancy
yarn add vue-utterances
```
## Usage
Import and register the component in your app or page:
```vue
import Utterances from 'vue-utterances';
```
### Nuxt
Wrap with `` to avoid SSR issues:
```vue
```
## Props
| Name | Type | Description |
|-----------|----------|--------------------------------------------------|
| repo | string | GitHub repo in the format `owner/repo` |
| issueTerm | string | Issue mapping term (e.g., pathname, url, title) |
| theme | string | Utterances theme |
| label | string | Label for created issues |
## Methods
Expose `reload()` to reload the widget if needed:
```js
const utterancesRef = ref();
utterancesRef.value.reload();
```
## Development
Build the library:
```bash
npm run build
```
Test locally in another app:
```bash
npm link
# In your test app:
npm link vue-utterances
```
## License
[MIT](https://github.com/khalby786/vue-utterances/blob/main/LICENSE)
## Credits
- [Utterances](https://utteranc.es/) - The original comments widget
- [How to Create and Publish a Vue Component Library – Update](https://www.freecodecamp.org/news/how-to-add-comments-to-your-vue-js-app-with-utterances/)
- [jet-ui](https://github.com/sjmc11/jet-ui)