Posts Learn Categories Tags About
/
Installing Disqus Comment System on Nuxt Js cover

Installing Disqus Comment System on Nuxt Js

Learn how to install Disqus comment system on a Nuxt Js project

5 months ago

8 mins read

10 views

In this post, you'll be learning how to install Disqus comment system on Nuxt Js application. The library that we'll be using is vue-disqus and it's quite straight forward to implement.

Install vue-disqus
Like always, install the library into the project first and then define a new plugin to store the configuration.
yarn add vue-disqus

The next part is to create a new file inside the plugin folder and call it "disqus.js". Here the plugin will be initialized and any configurations can be set for the project.
import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus, {
  shortname: 'your_shortname_disqus'
})

For the shortname, do get it from the Disqus admin section where this represents the name of the sites that we have registered on it.

Define in nuxt.config.js
Reference the plugin in the nuxt configuration file like below and set the mode to "client" where it's only available in the browser and not on the server. If you are wondering why is the configuration like that then the answer is that this plugin is only for the production environment. If you have not read my other post for Splitting Nuxt Js Configuration Based on the Environment, do give it a read as it contains information on how this kind of config is done and beneficial for Nuxt project.
const config = {}

if (process.env.NODE_ENV === "production") {
  config.plugins.push(...[
    {
      src: './plugins/disqus.js',
      mode: 'client'
    }
  ])
}

export default config

Call Discord Component
The last and final step is to define the component on the place where we want to show the comment.
<client-only>
  <Disqus/>
</client-only>

With the Disqus tag you can pass in any classes whenever necessary and all of the available properties can be available in the documentation. For the Disqus total comment count also available as a separate component.
<DisqusCount identifier="your_identifier_here" >

Finally, run "yarn dev" and view the page you have it defined, by right if everything works fine you will be able to see the comment now.