# @kurtliao/vue-infinite-scroll

> A minimal infinite scroll directive for vue/vue3

Latest version **0.0.6** (published 2022-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kurtliao/vue-infinite-scroll
pnpm add @kurtliao/vue-infinite-scroll
yarn add @kurtliao/vue-infinite-scroll
bun add @kurtliao/vue-infinite-scroll
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-07-08 |
| First published | 2022-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | kurt-liao |
| Maintainers | kurtliao |
| Keywords | vue, infinite-scroll, directive, vite, vue3 |

## Links

- npm: https://www.npmjs.com/package/@kurtliao/vue-infinite-scroll
- Repository: https://github.com/kurt-liao/vue-infinite-scroll
- Homepage: https://github.com/kurt-liao/vue-infinite-scroll#readme
- Issues: https://github.com/kurt-liao/vue-infinite-scroll/issues
- npm.io page: https://npm.io/package/@kurtliao/vue-infinite-scroll

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^3.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.182
- [lodash-unified](https://npm.io/package/lodash-unified.md) ^1.0.2
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.6

## Recent versions

- 0.0.6 (latest) — 2022-07-08
- 0.0.5 — 2022-07-08
- 0.0.4 — 2022-07-08
- 0.0.3 — 2022-07-08
- 0.0.2 — 2022-07-08
- 0.0.1 — 2022-07-08

## README

<img src="./assets/logo.svg" />

<div align="center">
  <img src="https://img.shields.io/npm/v/@kurtliao/vue-infinite-scroll?style=for-the-badge"/>
  <img src="https://img.shields.io/npm/l/@kurtliao/vue-infinite-scroll?style=for-the-badge"/>
  <img src="https://img.shields.io/bundlephobia/min/@kurtliao/vue-infinite-scroll?style=for-the-badge" />
</div>

## Installation

```
npm install @kurtliao/vue-infinite-scroll

or

yarn add @kurtliao/vue-infinite-scroll
```

## Usage

### Import globally
```js

import InfiniteScroll from "@kurtliao/vue-infinite-scroll";

const app = createApp(App);

app.directive("InfiniteScroll", InfiniteScroll);
```

### Simple

```vue

<template>
  <ul class="list" v-infinite-scroll="loadMore">
    <li class="row" v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const loadMore = () => {
  // call your api here to load more data
}

</script>

<style>
.list {
  height: 300px;
  overflow: auto; // make sure the element has overflow style
}

.row {
  height: 200px;
}

</style>

```

### Optional

`infinite-scroll-disabled`

```vue
<template>
  <ul class="list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="hasNoMore">
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const hasNoMore = ref(false)

const loadMore = () => {
  // call your api here to load more data
  ...
  
  // if no more data
  hasNoMore.value = true
}

</script>
```

`infinite-scroll-delay`

```vue
<template>
  <!-- set delay for throttle milliseconds, default is 300ms -->
  <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-delay="1000">
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script setup>

const loadMore = () => {
  // call your api here to load more data
  ...
}

</script>
```

---
_Source: https://npm.io/package/@kurtliao/vue-infinite-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._