Nuxt.jsでSPAからSSRに変更しようとしたら、そのままでうまくいかず。。 import時にエラーが出てしまうのに対処したときの備忘録。

状況

使っていたのは、ScrollRevealというアニメーションライブラリ。その中で、document.documentElementを参照しているので、サーバサイドレンダリングでエラーになる。。

変更前はこんな感じ。

import ScrollReveal from "scrollreveal";

export default {
  mounted() {
    ScrollReveal().reveal(".animate");
  }
}

変更後

export default {
  mounted() {
    this.$nextTick(() => {   // DOMが更新されるのを待って
      if (process.client) {  // クライアント側の場合
        const sr = require("scrollreveal"); // requireで読み込んで使う
        sr.default().reveal(".animate");
      }
    }
  }
}

$nextTickがないと、DOMが更新されてないときにアニメーションを設定してしまうので、無効化されてしまう。。

プラグインを使う場合

他にもプラグインを使うやり方も。

こんな感じで、nuxt.config.jsのpluginsでssr: falseを設定しておく。

plugins: [
  {src: "~/plugins/scrollreveal.js", ssr: false }
],

~/plugins/scrollreveal.jsは、こんな感じ。コンテキストにScrollRevealを注入しておく。

import Vue from  'vue'
import ScrollReveal from "scrollreveal";

Vue.prototype.$sr = ScrollReveal

pageコンポーネントの中では、同じような感じ。process.clientのときに、this.$srを使う。

export default {
  mounted() {
    this.$nextTick(() => {   // DOMが更新されるのを待って
      if (process.client) {  // クライアント側の場合
        this.$sr().reveal(".animate");
      }
    }
  }
}

以上！！

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

SSRなNuxt.jsで、DOM要素を参照するライブラリをインポートする

状況

変更後

プラグインを使う場合

参考にしたサイト様