Infinite Scroll With Vue.js 3 And Vite.js

A simple and easy-to-use Vue 3 infinite scroll component that supports both directions.

How to use it:

1. Import and register the component.

import InfiniteLoading from "v3-infinite-loading";
import "v3-infinite-loading/lib/style.css";
const app = createApp(App);
app.component("infinite-loading", InfiniteLoading);
app.mount("#app");

2. Add the InfiniteLoading component to the template.

<template>
  ...
  <InfiniteLoading @infinite="loadData" />
  ...
</template>

3. Define the data to load.

const loadData = async $state => {
  console.log("loading...");
  // ...
};

4. All component props.

top: { 
  type: Boolean, 
  required: false 
},
target: { 
  type: [String, Boolean], 
  required: false 
},
distance: { 
  type: Number, 
  required: false, 
  default: 0 
},
identifier: { 
  required: false 
},
firstload: { 
  type: Boolean, 
  required: false, 
  default: true 
},
slots: { 
  type: Object, 
  required: false 
},

Preview:

Infinite Scroll With Vue.js 3 And Vite.js

Changelog:

08/06/2022

  • v1.2.1: bugfix

07/29/2022

  • v1.2.0: use intersection observer API instead of scroll event; firstLoad prop is renamed to firstload

07/26/2022

  • v1.1.4: fix: fixed remove event listener TypeError

07/24/2022

  • v1.1.2: fix: fixed visibility in the viewport

07/23/2022

  • v1.1.1: feat: emit load while visible in the viewport

03/13/2022

  • v1.0.6: fix: more than one component on the same page

Download Details:

Author: oumoussa98

Live Demo: https://vue3-infinite-loading-demo.netlify.app/

Download Link: https://github.com/oumoussa98/vue3-infinite-loading/archive/refs/heads/main.zip

Official Website: https://github.com/oumoussa98/vue3-infinite-loading

Install & Download:

# NPM
$ npm i v3-infinite-loading

Add Comment