【Nuxt】外部ライブラリを使用してwindow is not definedになった時の対処法 #Nuxt

サーバーサイドレンダリングをしているとwindowでエラーになるので
公式では下記の書き方をして対処するよう書いてあります。

if (process.client) {
  require('external_library')
}

でも、外部ライブラリの中のコードでwindowとかdocumentが書いてあるときは
どう対応したらいいんだ・・・と悩んだので対処法を書いていきます。

外部ライブラリのコードでエラーになった時の対処法

下記のようにすればSSRに対応していないライブラリでも導入することが出来ます。

サーバーサイドレンダリングの対象からコンポーネントを除外できます

index.vue

<template>
  <no-ssr placeholder="Loading...">
    <vue-previewer :images="imgs" :options="{}" />
  </no-ssr>
</template>

plugins/vue-image-previewer.js

import Vue from 'vue';
import VuePreviewer from 'vue-image-previewer';

Vue.component('vue-previewer', VuePreviewer)

ライブラリのexampleでは Vue.use(VuePreviewer) のように書いてあっても
Vue.component の書き方に直してください。

これでvueファイルでcomponentsを定義しなくてもグローバルで使えるようになります。
第一引数に定義したコンポーネント名（今回ならvue-previewer）で記述してください。

nuxt.config

  plugins: [
    // Nuxt.js 2.4 以降、ssr:falseではなくmode: 'client'になる
    { src: '~/plugins/vue-image-previewer.js', ssr: false }
  ]

次に、nuxt.configで作成したpluginsをclientでのみ実行するよう設定してあげます。

以上で外部ライブラリを使う事ができたと思います。

今回使ったライブラリ。画像のプレビューが簡単にできます。
* vue-image-previewer - npm