An infinite scroll paginate plugin for Vue.js 3.0

An infinite scroll paginate plugin for Vue.js 3.0, to help you implement an infinite scroll list more easily.

NPM

npm install v-scroll-paginate

Yarn

yarn install v-scroll-paginate

Usage

import { createApp } from 'vue';

import Paginate from 'v-scroll-paginate';

const app = createApp(App);

app.use(Paginate);

app.mount('#app');

<v-scroll-paginate :fetch="fetch">
        <template #spinner>
            Loading...
        </template>
        <template #nomore>
            No more data
        </template>
</v-scroll-paginate>

<script>
    import { mapState, useStore } from "vuex";
    import { onMounted, computed } from 'vue';

    export default {       

        setup() {

            const store = useStore();

            const data = computed(() => {
                return store.state.post.data
            });            

            const fetch = (status) => {
                store.dispatch('post/fetch', { offset: data.value.offset }).then(res => {
                    if (!res.hasNextPage)
                        status.COMPLETED = 1;
                    else
                        status.LOADING = 0;
                })
            }

            return { data, fetch }

        }
    }
</script>

Most websites now we are using Bootstrap, Material or Spinners FontAwesome and it’s available so we do not want to throw this library added to it less and flexible.

<v-scroll-paginate :fetch="fetch">
        <template #spinner>
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
        </template>       
</v-scroll-paginate>

Github: https://github.com/Morioh-Lab/v-scroll-paginate

#vue #vuejs #javascript