Every self-respecting blog/ journal/ article site needs feedback from its readers, including this one! For a while I was experimenting with options including: Disqus, Facebook Comments, commentbox.io.
The obstacle faced was that the sample code is for plain Javascript code. Until now searching for Vue-specific handling had been elusive. This article solved it. No surprise: the blog the article is on is also powered by Vuepress.
The short ans: create a Disque Vue component! Long ans:
<template>
<div id="disqus_thread"></div>
</template>
<script>
export default {
mounted() {
var disqus_config = function () {
this.page.url = $page.frontmatter.regularPath; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = $page.frontmatter.key; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() {
var d = window.document, s = d.createElement('script');
s.src = 'https://ihazcodez.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}
}
</script>
Notes
Moving between articles will not refresh the Disque component (you will see the comments for the wrong article, because SPA). To tickle the component into refreshing on url change, put a key to how the component is called:
<Disqus :key="$route.fullPath"/>