Add comments to your Gridsome app!

Bharat Kashyap — Sun, 28 Nov 2021 20:06:47 +0000

Recently, I had to go through the process of thinking about how to add comments to a magazine website that I had built a while back using Gridsome - a JAM-stack based static site generator for Vue.

TL;DR

Of all the commenting engines, if you're looking for something that's free for low usage and easy to integrate: go ahead with Disqus.

Use this excellent component to integrate Disqus for Vue packages : vue-disqus.

Build your own comments?

This is the option I began with.

If your application already has authentication, then I'd say it might be worthwhile for you to be able to control and own your own comments data by building a comments component.

However, any standard comments system would expect:

nested replies
emoji reactions
likes to be a part of it - things that rapidly start spinning out of the maintainability hand.

Disqus

I'd seen Disqus being used across multiple websites for comment management, so I was inclined to integrate it.

The other option I considered (but quickly abandoned) was NodeBB, but soon realised that it was more of a full-fledged discussions management solution, rather than an easy embeddable comments manager.

Usage

Before integrating, all I had to do was:

Create a Disqus account and generate a "shortcode" for my app.
I followed the steps mentioned here and had no issues integrating.
Behind the scenes, the component embeds <shortcode>.disqus.io as an iframe, wherever you include it.

Limitations

Keep in mind that:

Disqus is not open source
You don't own the comments data that comes in
Although it's free to begin with, if you're anticipating high traffic or want to remove any ads being displayed on the page, you might want to check out the pricing pages or investigate alternative solutions.