# vue-infinite-scrolling

> Vue component plugin for infinite-scrolling.

Latest version **0.0.2** (published 2022-05-28) · 0 weekly downloads

## Install

```sh
npm install vue-infinite-scrolling
pnpm add vue-infinite-scrolling
yarn add vue-infinite-scrolling
bun add vue-infinite-scrolling
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-05-28 |
| First published | 2022-05-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | f.a.tregubov |
| Keywords | infinite-scroll, vue |

## Links

- npm: https://www.npmjs.com/package/vue-infinite-scrolling
- Repository: https://github.com/FedorTregubov/vue-infinite-scrolling
- Homepage: https://github.com/FedorTregubov/vue-infinite-scrolling#readme
- Issues: https://github.com/FedorTregubov/vue-infinite-scrolling/issues
- npm.io page: https://npm.io/package/vue-infinite-scrolling

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.25

## Recent versions

- 0.0.2 (latest) — 2022-05-28
- 0.0.1-a — 2022-05-26

## README

# vue-infinite-scrolling

## About
Vue component plugin for infinite-scrolling.

## How to use:
***!Note: For now it is compatible with Vue3 only.***

You can install component like a plugin:

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import VueInfiniteScrolling from 'vue-infinite-scrolling';

const app = createApp(App);
app.use(VueInfiniteScrolling);
app.mount('#app');
```
Or you can import it locally inside yours one:
```vue
<script lang="ts">
import { VueInfiniteScrolling } from 'vue-infinite-scrolling';
</script>

<template>
  <ul>
    <li
      v-for="i in items"
      :key="i"
    >
      {{ i }}
    </li>

    <VueInfiniteScrolling
      v-bind="{
        isAppendedToBody: true,
        pagination,
        isLoading,
      }"
      @load-more="loadMore"
    />
  </ul>
</template>
```

### Props
| Prop name | Type    | Is required | Default value | Description                                                                                       |
| ----- |---------|-------------|--------------|---------------------------------------------------------------------------------------------------|
| `pagination` | Object  | true        | -            | Interface `VueInfiniteScrollingPagination {  limit: number; offset: number; totalItems: number;}` |
| `isLoading` | Boolean | true        | -            | Is list loading                                                                                   |
| `isAppendedToBody` | Boolean | false       | false        | Add scroll event listener to the body or to the list-element                                      |
| `listHeight` | String  | false       | '100%'       | List-element max-hight                                                                            |
| `scrollOffset` | Number  | false       | 100          | Scroll offset in px                                                                               |
| `scrollDirection` | String  | false       | 'to-bottom'  | Enum `VUE_INFINITE_SCROLLING_DIRECTION`: 'to-bottom', 'to-top'                                    |
| `scrollGuardTimeout` | Number  | false       | 100          | Scroll delay timeout to prevent large number of calls                                             |



## Slots
| Slot name | Description                                      |
|-----------|--------------------------------------------------|
| `default` | Default slot. Uses 'Loading...' sign by default. |

## Development

### Project setup:
Requirements:
- Node >= v16.14.2
- npm >= 8.5.0

Install dependencies:
```sh
npm ci
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

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