Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ts-pro/vue-eternal-loading
Vue 3 infinity loading component
https://github.com/ts-pro/vue-eternal-loading
Last synced: 3 months ago
JSON representation
Vue 3 infinity loading component
- Host: GitHub
- URL: https://github.com/ts-pro/vue-eternal-loading
- Owner: ts-pro
- License: mit
- Created: 2021-06-27T18:54:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-30T07:39:35.000Z (6 months ago)
- Last Synced: 2024-07-19T00:38:24.461Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.51 MB
- Stars: 61
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - vue-eternal-loading - 💚 Vue 3 infinity loading component for js, ts, browser, etc... (Packages)
README
# 🇺🇦 vue-eternal-loading [](https://app.travis-ci.com/ts-pro/vue-eternal-loading)
The Infinity loading component is written in [TypeScript](https://www.typescriptlang.org/) for [Vue 3](https://v3.vuejs.org/). No dependencies.
### Features:
- 4 directional ( top / left / right / bottom)
- 4 loading states ( loading / no-more / no-results / error )
- Custom markup & styles
- Works in browsers & bundlers
- SSR friendly
### Installation:
**Yarn**
```
yarn add @ts-pro/vue-eternal-loading
```
**Npm**
```
npm install @ts-pro/vue-eternal-loading
```
**Browser**
```html
```
### Simple usage:
```html
```
```ts
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);
}
```
### Guide & demo:
Check out our [vue-eternal-loading docs](https://ts-pro.github.io/vue-eternal-loading/)
### Releases
List releases [vue-eternal-loading releases](https://github.com/ts-pro/vue-eternal-loading/releases)
### Vue2 support
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](https://github.com//PeachScript/vue-infinite-loading).
### Issue
Please feel free to create an issue or submit a feature request [vue-eternal-loading issues](https://github.com/ts-pro/vue-eternal-loading/issues)
### License
MIT License