Disqus

Usage

You can import the Disqus component individually.

<template>
  <div>
    <!-- omitted -->
    <div class='comments'>
      <Disqus shortname='your_shortname_disqus' />
    </div>
  </div>
</template>

<script>
import { Disqus } from 'vue-disqus'

export default {
  name: 'PostPage',
  components: {
    Disqus
  }
}
</script>

Props

shortname

Type	Required
String	It's required if the component is registered locally

A shortname is the unique identifier assigned to a Disqus site and tells Disqus to load only your site's comments.

<Disqus shortname='your_shortname_disqus' />

TIP

Learn more about shortname, opens in a new window

pageConfig

Type	Required
Object	false

Page configuration properties are used as parameters for Disqus' behaviors and settings.

Key	Default	Description (Tells the Disqus service)
url	document.baseURI	The URL of the current page. See more, opens in a new window
identifier	$route.path or location.pathname	How to identify the current page. The identifier is used to look up the correct thread. See more, opens in a new window
title	document.title	The title of the current page. See more, opens in a new window
category_id		The category to be used for the current page. See more, opens in a new window
slug
api_key
author_s3
remote_auth_s3
language
integration

<template>
  <div class='comments'>
    <Disqus :pageConfig="pageConfig" />
  </div>
</template>

<script>
export default {
  // ...
  data: () => ({
    pageConfig: {
      title: 'My custom title',
      category_id: 'sports'
    }
  })
}
</script>

WARNING

If you are using the vue-router always opt for HTML5 history: mode.

ssoConfig

Type	Required
Object	false

Single sign-on (SSO) is a protocol for authenticating an existing user to comment without registering for a global Disqus account. See more, opens in a new window

Key	Description
name	Your site's name. We will display it in the Post As window.
button	Address of the image that acts as a button. Disqus 2012 users, see style guide below.
icon	Address of the image that appears on the login modal's SSO tab. Favicons work well here
url	Address of your login page.
logout	Address of your logout page.
width	Width of the login popup window. Default is 800.
height	Height of the login popup window. Default is 400.

<template>
  <div class='comments'>
    <Disqus :ssoConfig="ssoConfig" />
  </div>
</template>

<script>
export default {
  // ...
  data: () => ({
    ssoConfig: {
      name: 'SampleNews',
      button: 'http://example.com/images/samplenews.gif',
      icon: 'http://example.com/favicon.png',
      url: 'http://example.com/login/',
      logout: 'http://example.com/logout/',
      width: '800',
      height: '400'
    }
  })
}
</script>

TIP

Learn more about Integrating Single Sign-On, opens in a new window

lang

Type	Required
String	false

Disqus currently supports dozens of languages, ranging from Arabic to Ukrainian. For a full list of supported languages, see the Disqus project on Transifex, opens in a new window .

<Disqus lang="fr_CA" />

TIP

e.g. French (Canada) => fr_CA, see more about language codes, opens in a new window

lazy

Type	Default
String	true

Apply lazy load in disqus script and embed.

lazyConfig

Type	Default
Object	{ root: null, rootMargin: '300px', threshold: 0.5 }

Customize the options of the IntersectionObserver.

Events

VueDisqus registers events ($emit) for each callback available in the disqus API.

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 track new comments and replies, for example via Google Analytics).
before-comment
init
identify
paginate
pre-init
pre-data
pre-reset
after-render

<template>
  <div class='comments'>
    <Disqus @new-comment="newComment" />
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    newComment ({ id, text }) {
      // your code
    }
  }
}
</script>