Posts Learn Components Snippets Categories Tags Tools new About
/

Installing Disqus Comment System on Nuxt Js

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

1 year ago

8 mins read

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

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.

Alternative Tags

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

Load comments for Installing Disqus Comment System on Nuxt Js

new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets
new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components
)