Nuxt.js Disqusのコメントフォームを表示する際に発生した警告の対応方法

Disqusの設定画面で生成されたUniversal Codeを本ブログの記事ページで読み込むようにしたところ、Google Chromeのコンソールに警告が発生したので原因と対応方法をまとめました。

警告と原因

Google Chromeのコンソールに以下の警告が表示されていました。

Use DISQUS.reset instead of reloading embed.js please. See https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

警告は特定のパターンのページ遷移をしたときに表示されました。

1. 記事ページにランディング => 警告なし
2. トップページにランディングして記事ページに遷移 => 警告なし
3. 記事ページにランディングしてトップページに遷移して同じ記事ページに戻る => 警告あり

対応方法

上記の問題を解消するnpmプラグインを実装した方がいらっしゃいました🙏

Nuxt.jsにインストールする手順はREADMEに記述されています。

ソースコードを読んで確認したところ

1. Vueのmountedが実行されたとき
   1. window.DISQUS が定義済みの場合はresetを呼び出す
   2. 定義されていない場合は初期化する

というロジックになっていました。つまり、最初に表示したページではDisqusインスタンスを初期化して、次に表示したページではDisqusインスタンスのreset関数を実行するという動きになります。

参考: https://github.com/ktquez/vue-disqus/tree/v3.0.5#install-in-nuxt

結果

vue-disqusをインストールしたところGoogle Chromeのコンソールに警告が表示されなくなりました。