Infinite Scroll Component For Vue 3 - Eternal Loading

Install & Download:

# Yarn
$ yarn add @ts-pro/vue-eternal-loading
# NPM
$ npm i @ts-pro/vue-eternal-loading

Description:

An infinite scroll (infinity loading) component Vue3, based on IntersectionObserver API.

Basic usage:

1. Add the Eternal Loading component to the app.

<vue-eternal-loading :load="load"></vue-eternal-loading>

2. This example shows how to implement the infinite scroll on your app.

const URL = '/path/to/API';
const PAGE_SIZE = 5;
const App = {
  data() {
    return {
      page: 1,
      users: [],
    }
  },
  methods: {
    loadUsers(page) {
      return fetch( `${URL}?delay=1&per_page=${PAGE_SIZE}&page=${page}`)
        .then(res => res.json())
        .then(res => res.data);
    },
    load(action) {
      this.loadUsers(this.page).then((users) => {
        this.users.push(...users);
        this.page += 1;
        action.loaded(users.length, PAGE_SIZE);
      })
    }
  }
};
const app = Vue.createApp(App);
app.component('vue-eternal-loading', VueEternalLoading);
app.mount('#app');

3. Available component props.

load: {
  required: true,
  type: Function as PropType<
    (action: LoadAction, payload: LoadPayload) => void
  >,
},
isInitial: {
  required: false,
  type: Boolean,
  default: true,
},
position: {
  required: false,
  type: String as PropType<Position>,
  // top, left, right, bottom
  default: 'default',
},
container: {
  required: false,
  type: Object as PropType<HTMLElement | null>,
  default: null,
},
margin: {
  required: false,
  type: String,
  default: undefined,
},