DEV Community

Bharat Kashyap
Bharat Kashyap

Posted on

Add comments to your Gridsome app!

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.


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.


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.


Before integrating, all I had to do was:

  1. Create a Disqus account and generate a "shortcode" for my app.

  2. I followed the steps mentioned here and had no issues integrating.

  3. Behind the scenes, the component embeds <shortcode> as an iframe, wherever you include it.


Keep in mind that:

  1. Disqus is not open source

  2. You don't own the comments data that comes in

  3. 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.

Happy commenting!

Discussion (0)