An infinite scroll component compatible with vue.js 3 and vite, to help you implement an infinite scroll list more easily.
- Lightweight and simple to use
- Internal spinner
- 2-directional support (Top and bottom)
npm install v3-infinite-loadingregister globally:
import InfiniteLoading from "v3-infinite-loading"; import "v3-infinite-loading/lib/style.css"; // required if you're not going to override default slots const app = createApp(App); app.component("infinite-loading", InfiniteLoading); app.mount("#app");usage in SFC with script setup:
<script setup> import InfiniteLoading from "v3-infinite-loading"; import "v3-infinite-loading/lib/style.css"; // required if you're not going to override default slots </script> <template> <InfiniteLoading /> </template><html> <head> <script src="https://unpkg.com/vue@3.4.38/dist/vue.global.js"></script> <script src="https://unpkg.com/v3-infinite-loading@1.3.2/lib/v3-infinite-loading.umd.js"></script> <link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.3.2/lib/style.css" /> </head> <body> <div id="app"> <infinite-loading target="#app" @infinite="infiniteHandler"></infinite-loading> </div> <script> const { ref, createApp } = Vue; const app = createApp({ // your app }); app.component("infinite-loading", V3InfiniteLoading.default); app.mount("#app"); </script> </body> </html>Checkout a full working example on codepen or github gists
Documentation available on v3-infinite-loading Netlify
Check out live demo v3-infinite-loading-demo Netlify
Detailed changes for each release are documented in the release notes.
Comming soon
The MIT License (MIT)
