about uscontact

How to add Disqus Comments to NuxtJS project

Category:
Author: zemna
Date: April 18, 2021
Share this:

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>
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu