Project URL: https://vue-utterances.glitch.me/
A bit of a back story…
I have a blog made with Vue. I wanted to add comments to my blog posts, and after exploring options like Disqus and Commento, I discovered Utterances. It’s simple to use, very easy to install and it uses GitHub issues behind the hood to make a GitHub-themed comments plugin. To install it, all you need to do is add a script tag (linked to Utterance’s JS file) to wherever you want the comments to show up. Add your repo name and theme to the script tag’s attributes, it’ll work! But the thing is Vue does not accept script tags directly, and if you try that you’ll get an error like this:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed.
It’s not impossible to add script tags, you need to add them with external DOM manipulation using JavaScript (document.createElement("script") and then appending it). But doing all that, and then setting attributes for Utterances is just time consuming. Especially if you’re a lazy developer, like me.
…
So after using Vue for almost a year, I decided to create a Vue component for Utterances that would do all the hard work, and I was gonna publish it to NPM for public use. I had no idea on packaging Vue components for NPM use so this really good tutorial by freeCodeCamp helped me. And I’m proud to present it: https://vue-utterances.glitch.me/!
You can install it via NPM or use unpkg’s CDN to use it with Vue, more info on usage can be found in the repo.