【Nuxt.js】Universalモードで「window is not defined」エラーが出たときの対処法

Nuxt.jsに外部プラグインを追加したときに下記のようなエラーがでました。

ReferenceError: window is not defined　<hogehoge>

Universal(SSR)モードのエラー

Universal(SSR)モードのときはJavascriptの命令文「document」や「window」はエラーになってしますようです。

インストールしたプラグインがサーバーサイドで動いているようでした。

Nuxtがサーバー側でレタリングする際に、クライアント(ブラウザ)は存在しませんので「document」や「window」はサーバー側ではエラーをおこすようです。

フーム、じゃあクライアント側で設定されていないプラグインは使えないじゃかと思ったのですが、きちんと対処法がありました。

フロントで動くように記述

<client-only>を記述することによりこのエラーを回避することができました。
API: コンポーネント

<client-only>
  <hogehoge>Foo Bar</hogehoge>
</<client-only>

※Nuxt のバージョンがv2.9.0未満の場合、<client-only>のかわりに<no-ssr>を使用してください。