Home / Tutorials / Installing Disqus Comment System on Nuxt Js
Installing Disqus Comment System on Nuxt Js cover

Installing Disqus Comment System on Nuxt Js

8 mins

768

3 years ago

0 comments

Average

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.

Step 1: 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.

Step 2: 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

Step 3: Call Discord Component


The last and final step is to define the component in 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.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Related Tutorials

Code Snippets

Collection of Laravel, AlpineJS, VueJS, Tailwind CSS, Flutter snippets and more. New snippets added every day.
View Snippets

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this