Infinity loading component written on 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 must pass this method to the component
// and it will be call automatically when needed
async function load({ loaded }) {
// Load your data from server or anywhere
const loadedItems = await loadItems(page);
items.value.push(...loadedItems);
page += 1;
// Call `loaded` callback with 2 arguments:
// 1. How many items we have loaded
// 2. Our page size to know when we riched the end
loaded(loadedItems.length, PAGE_SIZE);
}Check out our vue-eternal-loading docs
List releases vue-eternal-loading releases
Our component is for Vue 3, if you are looking solution for Vue 2 - check this lib out vue-infinite-loading.
Feel free to write an issue or feature request vue-eternal-loading issues
MIT License