Infinite Scroll With Vue.js 3 And Vite.js

Install & Download:

# NPM
$ npm i v3-infinite-loading

Description:

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 
},