Vuetify Infinte Scroll Component

InfiniteScroll.vue

<template>
  <div>
    <div v-for="(item, i) in items" :key="i" v-intersect="onIntersect" :data-last="i === items.length - 1">
      <slot :item="item"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
export default class InfiniteScroll extends Vue {
  @Prop()
  items;
  @Prop({ default: null })
  lastPage;
  @Prop({ default: 1 })
  page;

  mounted() {
    this.$emit('loadMoreItems', this.page);
  }

  onIntersect(entries, observer) {
    // If the last item intersects and theres more pages to load, emit 'loadMoreItems'
    if (entries[0].isIntersecting && entries[0].target.dataset.last && this.page < this.lastPage) {
      this.$emit('loadMoreItems', this.page + 1);
    }
  }
}
</script>

UsageExample.vue

<template>
  <v-list>
    <InfiniteScroll v-bind="infiniteScrollProps" @loadMoreItems="loadItems">
      <template v-slot="{ item }">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="subtitle-1 font-weight-bold" v-text="item.title"></v-list-item-title>
            <v-list-item-subtitle class="text--primary" v-text="item.content"></v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </InfiniteScroll>
  </v-list>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import InfiniteScroll from 'InfiniteScroll.vue';

@Component({
  components: { InfiniteScroll },
})
export default class UsageExample extends Vue {  
  infiniteScrollProps = {
    page: undefined,
    pageSize: 5,
    items: [] as any,
    lastPage: null,
  };

  async loadItems(page) {
    // This call returns something like { page:1, last_page:32, results:[{...},...] }
    let result = await serverSideCall({ limit: this.infiniteScrollProps.pageSize, page}));
    this.infiniteScrollProps.page = page;
    this.infiniteScrollProps.lastPage = result.last_page;
    this.infiniteScrollProps.items = this.infiniteScrollProps.items.concat(result.results);
  }
}
</script>