Vue component to integrate Disqus comments in your application, with support for SPA
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

vue-disqus

Vue component to integrate Disqus comments in your application Vue.js, with support for SPA and Vue 2.*

Installation

Install package via NPM
$ npm install vue-disqus

Include via CDN

<script src="https://cdn.jsdelivr.net/npm/vue-disqus@3/dist/vue-disqus.js"></script>

Install in your vue app

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)
...

Using in Vue file components

<template>
  <div class="comments">
    <vue-disqus shortname="your_shortname_disqus" :identifier="page_id" url="http://example.com/path"></vue-disqus>
  </div>
</template>
// ...

Install in Nuxt

Create plugin file plugins/disqus.js

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)

In config file nuxt.config.js

...
plugins: [
  '~/plugins/disqus'
]

Using in Vue file components

<template>
  <div class="comments">
    <vue-disqus shortname="your_shortname_disqus" :identifier="page_id" url="http://example.com/path"></vue-disqus>
  </div>
</template>
// ...

Using with HTML files

Add the component to the base instance Vue
<!-- Required Javascript -->
<script src="https://vuejs-cdn-link"></script>
<script src="https://unpkg.com/vue-disqus"></script>
<!-- Assuming your view app is APP. -->
<div id="app">
  <div class="comments">
    <vue-disqus shortname="your_shortname_disqus"></vue-disqus>
  </div>
</div>

Props

Prop Data Type required Description
shortname String true Your shortname disqus.
title String false Title to identify current page.
identifier String false Your 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

Important

Don't use hash (myurl.com/#/) in urls, if you are using the vue-router always opt for HTML5 history: mode.

Events

Event name Description
ready When Disqus is ready. This can be used to show a placeholder or loading indicator.
new-comment When a new comment is posted. This can be used to update comment counters in real time.

See Event Handling.

License

MIT

Contributing

  • Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
  • Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md
  • Send a pull request

If you want a faster communication, find me on @ktquez

Thank you