How to add Disqus Comments to NuxtJS project

Install vue-disqus package from npm

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.

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

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

Register plugin file in nuxt.config.js

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

Add Disqus vue component to your vue file

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

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