import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.component('infinite-loading', InfiniteLoading)

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;
  }
}

<div
    v-for="(item, index) in responseData"
    :key="item.id"
>
    <div v-if="index < PER_PAGE">
        <!-- コンテンツを表示します -->
    </div>
</div>

<no-ssr>
    <infinite-loading 
        spinner="spiral"
        @infinite="infiniteHandler"
    >
        <span slot="no-more">読み込み終わりました</span>
    </infinite-loading>
</no-ssr>

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