Gridsome Post Comments

In this tutorial, we will look at how to add Disqus commenting to a Gridsome site. Since Gridsome is part of the Vue.js ecosystem, these steps should work with any Vue.js site.

Setup Disqus

So, we are going to set up Disqus, an external service that uses an iframe to inject comments on your site.

First step is to go to Disqus and sign up for a free account. During account setup, choose the option 'I want to install Disqus on my site'. The next setting to watch for is when you are asked, 'What platform is your site on?', pick 'Universal Code'. Make a note of the Shortname you are assigned to distinguish your site, as we will use it later.

Setup Plugin

To inject Disqus on your site, we will be using the Vue package vue-disqus. To add this package to your project: yarn add vue-disque or npm install --save vue-disque.

We are going to set up vue-disqus globally, but there are additional directions for getting up and running locally in the vue-disqus documentation.

Add to your main.js:

import VueDisqus from 'vue-disqus'

export default function (Vue, { head })  {
  Vue.use(VueDisqus)
}

Next, you need to add the component where you want the comments added. In my case, I am using Gridsome's default blog template, so I added the component to the Post template.

Insert the following:

<Disqus shortname="mysiteshortname" :identifier="$page.post.title" />

Note: The above code does not agree with the current Gridsome documentation. I have prepared a Pull Request to fix this error and align with the vue-disqus documentation.

Now everything works. That is it.

Optional Refactor

The above works, however, if you are adding a comment block to many places in your site, we can abstract the shortname a little.

If you include the shortname in the main.js, it will default throughout your site:

import VueDisqus from 'vue-disqus'

export default function (Vue, { head })  {
     Vue.use(VueDisqus, {
      shortname: 'your-shortname-disqus'
    })
}

Then insert the component in your template like this:

<Disqus :identifier="$page.post.title" />