サーバーサイドレンダリングをしているとwindowでエラーになるので
公式では下記の書き方をして対処するよう書いてあります。
if (process.client) {
require('external_library')
}
でも、外部ライブラリの中のコードでwindowとかdocumentが書いてあるときは
どう対応したらいいんだ・・・と悩んだので対処法を書いていきます。
外部ライブラリのコードでエラーになった時の対処法
下記のようにすればSSRに対応していないライブラリでも導入することが出来ます。
no-ssrコンポーネントを使う
サーバーサイドレンダリングの対象からコンポーネントを除外できます
index.vue
<template>
<no-ssr placeholder="Loading...">
<vue-previewer :images="imgs" :options="{}" />
</no-ssr>
</template>
pluginsを作成してグローバルコンポーネントに設定する
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）で記述してください。
プラグインのbuidオプションでssr: falseにする
nuxt.config
plugins: [
// Nuxt.js 2.4 以降、ssr:falseではなくmode: 'client'になる
{ src: '~/plugins/vue-image-previewer.js', ssr: false }
]
次に、nuxt.configで作成したpluginsをclientでのみ実行するよう設定してあげます。
以上で外部ライブラリを使う事ができたと思います。
参考
今回使ったライブラリ。画像のプレビューが簡単にできます。