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.
Like always, install the library into the project first and then define a new plugin to store the configuration.
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.
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.
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 configStep 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.
