rustem81 / vue-disqus

Vue component to integrate Disqus comments in your application, with support for SPA

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.

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