Nuxt.jsで無限スクロール（Infinite Scroll）を実現する方法

nuxt.jsで無限スクロールを実現する方法を紹介します。

vue-infinite-loadingのインストール

vue-infinite-loadingをインストールします。

npm install vue-infinite-loading --save

無限スクロールの実装

プラグイン導入

pluginsディレクトリ配下にinfiniteloading.jsファイルを作成し、以下を追加します。

infiniteloading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'
 
Vue.use(InfiniteLoading)

nuxt.config.js にプラグインを追加します。

nuxt.config.js

plugins: [
    { src: '~/plugins/infiniteloading', ssr: false }
]

ページに実装

無限スクロールを実現したいページに以下を入れます。（dataを３件ずつ表示するという単純な例です。実際の表示部分は例では実装していないので、適宜追加してください）

index.vue

<template>
~~
~~
  <infinite-loading
    ref="infiniteLoading"
    spinner="waveDots"
    @infinite="infinite"
  >
    <span slot="no-more">これ以上ない</span>
    <span slot="no-results">データはない</span>
  </infinite-loading>
~~
~~
</template>
~~
~~
<script>
import InfiniteLoading from 'vue-infinite-loading'

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return {
      data: [1,2,3,4,5,6,7,8,9,10],
      displayData: [],
      pageIndex: 0,
      perPage: 3
    }
  },
  methods: {
    infinite($state) {
      this.pageIndex++
      this.displayData = this.data
        .slice(0, (this.pageIndex + 1) * this.perPage)
      if (this.displayData.length !== this.data.length) {
        $state.loaded()
      } else {
        $state.complete()
      }
    }
  }
</script>

spinner="waveDots" は読み込み中の表現を指定します。上記の例では以外にもspiral circles bubbles などがあります。
詳細はこちら。

<span slot="no-more"> はこれ以上表示内容がない場合（$state.complete() が呼ばれた場合）、<span slot="no-results"> はデータがない場合に表示されます。

静的ページの場合

nuxt generate を実行する場合は上記のままだと ReferenceError: document is not defined というエラーになります。
そのため、以下のように修正が必要です。

less と less-loader のインストール

npm install less less-loader --save-dev

import の修正

修正前のindex.vue

import InfiniteLoading from 'vue-infinite-loading'

修正後のindex.vue

import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading.vue'

以上により、nuxt generateも可能になります。