Nuxtでdocument is not definedエラー

Nuxt.jsにて、npmで提供されているVueコンポーネントを利用しようとした時に、ReferenceError: document is not definedというエラーが出ることがあるのでそれの解決方法。

とりあえず解決方法は？

例えば僕の愛用しているJohMun/vue-tags-inputでも出るのだが、その場合下記のようにテンプレートを書く。

  <no-ssr>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </no-ssr>

プラグイン追加で出る場合は、nuxt.config.jsの該当プラグインでssr: falseにすれば解決する場合もある（プラグインの説明に書いてあったりする）

なぜ発生するのか？

エラーと対応内容を見ればだいたい分かると思うが、そもそもSSR（サーバーサイドレンダリング）を考慮していないVueコンポーネントも存在し、そういったライブラリは今回のようにブラウザ上だけで存在している、documentを参照している場合がある。

サーバーサイドレンダリングの場合はブラウザではないため当然documentは存在しないためundefinedとなりエラーになる。そのため、<no-ssr>タグで囲ってあげることで、ブラウザ上では表示するが、サーバーサイドレンダリングのタイミングでは動作させないようにすることでエラーを防ぐことができる、という仕組み。

そのため、当然Nuxt.jsに限らずサーバーサイドレンダリングしている場合は発生する場合がある。