Nuxt.js で 「window is not defined」というエラーが出た場合の対処

結論

十中八九 SSR 時のエラーだと思って良い。

事例

画面の実装(あるいは見た目)上には全く問題無いのに、エラーでコンポーネントが表示されないなど、ちょいちょいハマったことがある。

今日あったのは、 vue-awesome-swiper を導入してデプロイしたら、全く動かなかった件。

いろいろ調べると、コンソールの方に当該エラー( window is not defined ) が出ていた。

対処法として

SSR 時には必要の無い外部リソースを利用したコンポーネントなどでは、内部で window にアクセスしていることがある。

そういったライブラリを利用する場合は SSR を有効にしているとコケるため、 nuxt.config.jsplugins では ssr: false を指定してあげたりするが、それでも足りない場合があるっぽい。ちゃんと調べていないので真に受けないで欲しいが、少なくとも vue-awesome-swiper は後述の対応が必要だった。

さらに、当該ライブラリを利用する template 内では、 <no-ssr></no-ssr> で囲ってあげると良い。

一応、それで解決したが、もしかしたら nuxt.config.jsplugins では ssr: false は不要なのかも。