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

Preview:

Infinite Scroll With Vue.js 3 And Vite.js

Changelog:

07/21/2023

  • v1.3.0: You can now safely use DOM refs forĀ target prop; bugfixes

11/14/2022

  • v1.2.2: bugfixes

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

Add Comment