[ 目次 ]

• はじめに
• vue-lazyloadのインストール
• pluginを用意する
• nuxt.config.jsの修正
• 利用方法

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、本ブログの画像を遅延ロードするように変更してみたいと思います。

hilongjw/vue-lazyload

vue-lazyload を導入し実装していきます。

vue-lazyloadのインストール

■ npmを利用する場合

$ npm install vue-lazyload --save

■ yarnを利用する場合

$ yarn add vue-lazyload

pluginを用意する

~/plugins/vue-lazyload.jsというpluginを用意し、vue-lazyloadを読み込む設定を追加します

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
    lazyComponent: true
});

optionとして、lazyComponent: trueを設定することで、コンポーネントを利用できるようにします。

nuxt.config.jsの修正

~/plugins/vue-lazyload.jsを読み込むの設定を追加します。

・・・
plugins: [
  ・・・
  { src: '~/plugins/vue-lazyload.js', ssr: false }
],
・・・

フロントエンドのみで利用するため、ssr: falseを指定しています。
（ssrのデフォルトは、trueです）

利用方法

今回は投稿一覧の画像を遅延ロードするようにしました。

<no-ssr>
    <lazy-component>
        <img class="thumbnail"
            :alt="post.fields.title"
            :src="post.fields.heroImage.fields.file.url + '?fit=scale&w=350&h=196'"
            :srcset="`${post.fields.heroImage.fields.file.url}?w=350&h=196&fit=fill 350w, ${post.fields.heroImage.fields.file.url}?w=1000&h=562&fit=fill 1000w, ${post.fields.heroImage.fields.file.url}?w=2000&h=1125&fit=fill 2000w`"
            sizes="(min-width: 1024px) 400px, 100vw"
            v-if="post.fields.heroImage"
        >
    </lazy-component>
</no-ssr>

本ブログはSSGになります。その為エラーは出ないのですが、SSRの場合以下のようなエラーが出ます。

メッセージに記載がある通り、クライアントサイドとサーバーサイドでDOMツリーが異なる為エラーが出ます。
今回のlazyloadするimgタグのようなクライアントサイドのみレンダリングする要素は、no-ssrタグで囲む必要があります。
（私はそのように認識したのですが、間違っている場合など有識者の方のご意見もお待ちしております）