DEV Community

Matthew Piercey for OverScore Media

Posted on • Updated on

Nuxt, Meet Disqus

This article is part of a series on my experiences with Nuxt.js that I built into the nuxt-toolkit by OverScore Media

GitHub logo overscore-media / nuxt-toolkit

A bunch of useful example code snippets for use with Nuxt.js

See a live example at https://nuxt-toolkit.overscore.media! :]


Hey everybody! I hope you're doing well. You probably already know why you're here. If not, Nuxt is a Vue-based JS framework for building websites/web apps, and Disqus is a commenting system for blogs/websites.

Plug these together, and you get a pretty powerful duo, IMO. In we go!

GitHub logo ktquez / vue-disqus

Vue component to integrate Disqus count and comments in your application, with support for SPA

Installation Process

Save as a Dependency

yarn add vue-disqus or npm install --save vue-disqus.

Make a Plugin

Create a file in the ~/plugins folder of your Nuxt app. I named mine disqus.js. (Can you guess why? Can ya?) It should look like this:

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)
Enter fullscreen mode Exit fullscreen mode

Next, import said plugin in your nuxt.config.js like so:

// ...
plugins: [
  // Thanks https://dev.to/thelearneer for
  // pointing out that this shouldn't be in client mode
  '~/plugins/disqus',
],
// ...
Enter fullscreen mode Exit fullscreen mode

In the words of Lyle from the Animal Crossing series, "Bang! Boom!"

Lyle from Animal Crossing meme

Make it a Component

Now, you can do a ton with this power, but here's a rather grounded example that I used when I built https://botinabox.ca: (As I write this, I just noticed that my implementation on that site just broke. Oh well, I'll get around to fixing it, but it's probably my fault and unrelated to the way I setup the component...)

<!-- ~/components/Comments.vue -->
<template>
  <v-layout class="comment-box">
    <v-container>
      <vue-disqus
        v-if="metadata"
        shortname="botinabox"
        :identifier="`botinabox-${metadata.title}`"
        :url="`https://botinabox.ca/tutorials/${metadata.url}`"
      ></vue-disqus>
    </v-container>
  </v-layout>
</template>

<script>
export default {
  computed: {
    metadata () {
      const metadata = this.$store.state.tutorials.slice()

      const tutorialMeta = metadata.filter((tutorial) => {
        return `/tutorials/${tutorial.url}` === this.$route.path
      })[0]

      return tutorialMeta
    }
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Now, don't get overwhelmed by this. I'll break it down for you. First, notice the <vue-disqus> component amidst a couple of Vuetify components. That's the real kicker here, functionality wise. The shortname is super important; it's your site name when you sign up for Disqus at https://disqus.com/admin/. It all should be fairly straightforward. (I also recommend setting up a Comment Policy, but that's outside the scope of this article. Not that I'm known to be one to stay on scope, but you know....)

The v-if="metadata" is because I had some issues when I navigated to another page if the comment box was visible, so making it conditionally-visible solved my problem. The :identifier is for different pages - in this case I had it set up with my tutorials, so each tutorial is on a different page and has its own metadata (stored in Vuex, but again that's out of scope). Point is, IMO you'll need at the very least shortname, :identifier, and :url to make it worth it. You don't have to worry about the stuff in the computed: block, though; it's just how I actually used this component. Also, I do recommend conditional rendering with a v-if, if you can find a suitable condition.

In any case, that's how I made Disqus work in my Nuxt site. It works pretty well IMO (and Disqus has a white and dark theme, so you can change to match your site).

I realize some of you reading this may have some qualms about using Disqus (why are you reading this, then, I guess is a good question, but whatever). I get it; personally I think it can be a bit sketchy, and I'm not a big fan of how they use comment data, but when I find a better solution I'll publish another one of these tutorials on how to use it with Nuxt. For now, though, this is the best I got. Hope this was all helpful.

Top comments (6)

Collapse
 
bsantosh909 profile image
Santosh Bhandari

I guess you are aware that the plugin works when you navigate from within the website.

But if you directly go to the specific page i.e. nuxt-toolkit.overscore.media/disqus/ then the comment plugin will not work!

Collapse
 
mtpiercey profile image
Matthew Piercey

Yeah, that's a weird... quirk of the way I set it up.

Good catch; I currently have no way of fixing that particular bug, though. To be fair, it's more of a proof-of-concept than anything else, but you're right in that it isn't fully functional.

Collapse
 
bsantosh909 profile image
Santosh Bhandari

I happen to know the exact issue. Because earlier I had referred to your guide (when I was unknown about vue-disqus) and I too had the same issue.

But after digging to the core for a while I found the issues and fixed it in my site here.

So the actual issue is you importing the vue-disqus plugin in client mode. That is the reason it works when you navigate through pages but not on page reload..

If you wanna see that fix working, you can have a look at my site, and the source code here!

I hope that helps you ๐Ÿ˜„

Thread Thread
 
mtpiercey profile image
Matthew Piercey • Edited

Yep, that makes total sense (usually Vue plugins don't work in Nuxt because they aren't client-side, but this time it's the opposite). Oh, Nuxt...

I honestly never would've figured this out on my own, so thanks for sharing this.

Also, that's a very nice site you got there!

Thread Thread
 
bsantosh909 profile image
Santosh Bhandari

I am more than happy to help out, because that's how I share my knowledge and gain more knowledge as well..

And thanks for telling its nice โค๏ธ

Collapse
 
ktquez profile image
Alan Ktquez

Hi Matthew, nice tip!

After 1 year without updating the vue-disqus, was launched v4.

Some props have changed and we added new features like (lazy load, DisqusCount component to display the amount of comments per post (via identifier), the possibility to export the components locally, reset method, global shortname in plugin options, and more)

We also have new documentation.

If you find any errors when using vue-disqus or any feedback that can improve, I would like to know.

Thanks for using.