// in a vue2 project
import SmoothInfiniteScroll from "vue-smooth-infinite-scroll";

// common JS
var SmoothInfiniteScroll = require("vue-smooth-infinite-scroll");

<template>
    <smooth-infinite-scroll
        :itemHeight="220"
        :items="items"
        @next="onNext"
        :hasMore="hasMore"
        :preRenderCount="3"
    >
        <template v-slot="{ item }">
            <div>
                {{ item }}
            </div>
        </template>

        <template #loader>
            <span>Your custom loader component</span>
        </template>

        <template #noMoreData>
            <span>Your custom "no more data" component</span>
        </template>
    </smooth-infinite-scroll>
</template>

<script>
import SmoothInfiniteScroll from "vue-smooth-infinite-scroll";

export default {
    components: {
        SmoothInfiniteScroll
    },

    data() {
        return {
            items: [],
            currPage: 1,
            hasMore: true
        }
    },

    methods: {
        async fetchNewData(page) {
            /* your code to fetch new data by page number */
            const newData = await this.$http.get("SOME_URL");
            if (!newData.length) {
                // set hasMore to false for "noMoreData" slot to render
                this.hasMore = false;
            } else {
                // pass new data into the infinite scroll component
                this.items = this.items.concat(newData);
            }
        },

        onNext() {
            // fetch the next page of data upon hitting the bottom
            this.currPage = this.currPage + 1;
            this.fetchNewData(this.currPage);
        }
    }
}
</script>