# Vuepress Plugin Disqusjs

🔌 Register a global <DisqusJS /> component to add to your layouts.

This plugins is a vuepress wrapper of DisqusJS.

# Installation

# npm
npm i vuepress-plugin-disqusjs -D

# yarn
yarn add vuepress-plugin-disqusjs

# Register the plugin

plugins: {
    'disqusjs': { /* options */ }
},

Please check out Config for options.

Note that Vuepress allows multiple syntaxes to register plugins. See Vuepress documentation on how to use a plugin for more information.

# Use the Disqusjs component

This plugin present a out-of-box SSR-friendly component - <Disqusjs/>. Just put it wherever you like, and Disqus will be embedded in the right place. For example:

<template>
  <div>
    <Content />
    <!-- ...... -->
    <DisqusJS />
  </div>
</template>

Or you can simply put it in your .md file.

## Hello VuePress

This is a demo.

<Disqus/>

You can use all the props and events defined by DisqusJS.

Prop Data Type required Description
shortname String true Your disqus shortname.
url String false Your URL where Disqus is present
title String false Title that identifies the current page.
identifier String false The page's unique identifier
sso_config Object false Single sign-on (SSO)
api_key String false Your API key disqus
remote_auth_s3 String false implementation with Laravel/PHP
language String false Language overrides

# Config

See the table above. All the props are also configuration options for this plugin. They'll be passed to every Disqusjs component. You're still able to override it by passing down props. Note that if you don't set language, it'll use VuePress's $lang as default language.

There's still one option available - name which specifies the name of the disqus component. Defaults to: DisqusJS.

Made with ❤️ by Ahmad Mostafa - @z3by