The Infinity loading component is written in TypeScript for Vue 3. No dependencies.
- 4 directional ( top / left / right / bottom)
- 4 loading states ( loading / no-more / no-results / error )
- Custom markup & styles
- Works in browsers & bundlers
- SSR friendly
Yarn
yarn add @ts-pro/vue-eternal-loading Npm
npm install @ts-pro/vue-eternal-loading Browser
<head> <!-- Vue 3 must be loaded before `vue-eternal-loading` --> <script src="https://cdn.jsdelivr.net/gh/ts-pro/vue-eternal-loading/dist/vue-eternal-loading.umd.js"></script> </head><VueEternalLoading :load="load"></VueEternalLoading>const PAGE_SIZE = 5; // We need to pass this method to the component, // and it will be called automatically when needed. async function load({ loaded }) { // Load your data from the server or any other source. const loadedItems = await loadItems(page); items.value.push(...loadedItems); page += 1; // Call the `loaded` callback with 2 arguments: // 1. The number of items we have loaded // 2. Our page size to know when we have reached the end loaded(loadedItems.length, PAGE_SIZE); }Check out our vue-eternal-loading docs
List releases vue-eternal-loading releases
Our component is specifically designed for Vue 3. If you are looking for a solution for Vue 2, you can check out this library vue-infinite-loading.
Please feel free to create an issue or submit a feature request vue-eternal-loading issues
MIT License