LoginSignup
42
30

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-08-12

サーバーサイドレンダリングをしていると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でのみ実行するよう設定してあげます。

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

参考

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

42
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
30