Infinite Scroll for Vue3. Yet another component.

vue-infinite-scroll is a super simple and lightweight package allowing you to implement infinite scroll for your project in a second.

Just type
npm i @vpominchuk/vue-infinite-scroll

and use it as:
<infinite-scroll :active="true" distance="50px" auto-load="true" @process="load" />

<infinite-scroll /> component has a few properties to change the behavior.

Properties

Property	Type	Description
active	Boolean	Enable / Disable Component
distance	String	Distance from the bottom side of the page when component fires @process event to load the content. "200px" is a good enough, but you can choose any other value.
auto-load	Boolean	Fire @process event on component mount

Event

Property	Description
@process	Callback function - fires when user scrolls to the bottom side of the page. Load a new portion of your content here.

Sample

Sample is available under dev folder.

To try the sample, create a new folder out of your project.
Install vue-infinite-scroll package and run npm run serve

mkdir vue-infinite-scroll-exampe
cd vue-infinite-scroll-exampe
npm i @vpominchuk/vue-infinite-scroll
cd node_modules/@vpominchuk/vue-infinite-scroll/
npm i
npm run serve

If you are using Windows platform try
npm run serve-win

Open http://localhost:8080/ in your favorite browser

Remove node_modules inside @vpominchuk/vue-infinite-scroll/ after tests.

Github page:
https://github.com/vpominchuk/vue-infinite-scroll

Enjoy :)