[ 目次 ]

• はじめに
• DISQUSとは
• vue-disqusインストール
• plugins/disqus.jsファイルを作成
• nuxt.config.jsにpluginを設定する
• DISQUSコンポーネント読み込み
• DISQUSの表示について
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNuxt.jsで構築された本ブログに、DISQUSのコメントフォームを設置する方法をまとめます。以前Nuxt.jsでJustCommentsのコメントフォームを設置する方法を試しましたが、無料での利用が難しかった為設置をやめました。

Nuxt.jsでJustCommentsのコメントフォームを設置する方法

今後はDISQUSを設置して様子を見ていきたいと思います。
以下のライブラリを利用して導入していきます。

ktquez/vue-disqus

DISQUSとは

前回の記事でも説明しました。GatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法をご確認ください。

vue-disqusインストール

■ npmを利用する場合

$ npm install vue-disqus --save

■ yarnを利用する場合

$ yarn add vue-disqus

plugins/disqus.jsファイルを作成

pluginとしてvue-disqusを呼び出す為、plugins/disqus.jsファイルを追加します。

//plugins/disqus.js
import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)

nuxt.config.jsにpluginを設定する

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

DISQUSコンポーネント読み込み

コメントフォームを表示したい場所に以下のようにvue-disqusコンポーネントを設置します。
今回はdisqus_shortnameが設定されているときだけ表示することにしています。

<div v-show="disqus_shortname" class="mt-10">
  <vue-disqus
    :shortname="disqus_shortname"
    :identifier="post.fields.slug"
    :url="`${base_url}/posts/${post.fields.slug}`"
  ></vue-disqus>
</div>

disqus_shortnameは、環境変数から取得。

export default {
  ・・・
  data: () => ({
    base_url: process.env.BASE_URL,
    disqus_shortname: process.env.DISQUS_SHORTNAME
  })
  ・・・
}
</script>

DISQUSの表示について

本ブログの記事ページの下部に設置しています。ご確認ください。

最後に

前回のGatsbyJSへのDISQUS組み込みに続いて、Nuxt.jsにも組み込んで見ました。
皆さんも試してみてください。