How to add Disqus Comments to NuxtJS project

Last updated at April 19, 2021

💬

Install vue-disqus package from npm

bash
npm install vue-disqus --save

Create plugin file(ex. disqus.js) in /plugins folder

You can get your shortname after register your webiste in Disqus Admin.

/plugins/disqus.js
import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus, {
  shortname: 'your-disqus-shortname',
})

Register plugin file in nuxt.config.js

/nuxt.config.js
export default {
  // ...
  plugins: [
    '~/plugins/disqus`
  ]
}

Add Disqus vue component to your vue file

xxx.vue
<template>
  <div class="comments">
    <Disqus />
  </div>
</template>

Add DisqusCount vue component to your vue file to display comments count

See documentation to get detail information.

xxx.vue
<template>
  <div>
    <DisqusCount tag="a" :url="`/articles/${article.slug}`" :identifier="`/articles/${article.slug}`" />
  </div>
</template>