インストール

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

# vue-infinite-loading
yarn add vue-infinite-loading

型を定義します

vue-infinite-loading下記の通り設定します。

declare module 'vue-infinite-loading' {
  import Vue from 'vue'

  export default class InfiniteLoading extends Vue {
    spinner: string;
    direction: string;
    distance: number;
    onInfinite: Function;
    forceUseInfiniteWrapper: boolean;
  }

  export interface StateChanger {
    complete(): void;
    loaded(): void;
    reset(): void;
  }
}

後になって気付いたんですが、開発元の issueを見ると載っていたようです。

SSRの下では使えません

既定のデータを読み込み終えると「読み込み終わった」ことを表示します。もちろん、カスタム化することも可能、適宜コンポーネントを挿入していただければと思います。

    
        <span>読み込み終わりました</span>
    

infiniteHandler() を使って 10秒後に次々に表示されるようにしました。

infiniteHandler($state: any) {
    setTimeout(() => {
        if (this.count < this.posts.length) {
            this.count += 9
            $state.loaded()
        } else {
            $state.complete()
        }
    }, 1000)
}

これで無限スクロールを実現できます。