# vue3-virtual-list

> [![npm](https://img.shields.io/npm/v/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list) [![downloads](https://img.shields.io/npm/dm/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list) [![vue3](https://img.shields

Latest version **1.0.2** (published 2021-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-virtual-list
pnpm add vue3-virtual-list
yarn add vue3-virtual-list
bun add vue3-virtual-list
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-05-08 |
| First published | 2020-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | https://github.com/waningflow |
| Maintainers | waningflow |
| Keywords | vue, vue3, scroll, list |

## Links

- npm: https://www.npmjs.com/package/vue3-virtual-list
- Repository: https://github.com/waningflow/vue3-virtual-list
- Homepage: https://github.com/waningflow/vue3-virtual-list#readme
- Issues: https://github.com/waningflow/vue3-virtual-list/issues
- npm.io page: https://npm.io/package/vue3-virtual-list

## Recent versions

- 1.0.2 (latest) — 2021-05-08
- 1.0.1 — 2020-12-30
- 1.0.0 — 2020-12-30
- 1.0.0-alpha7 — 2020-12-28
- 1.0.0-alpha6 — 2020-12-28
- 1.0.0-alpha5 — 2020-12-28
- 1.0.0-alpha4 — 2020-12-28
- 1.0.0-alpha3 — 2020-12-28
- 1.0.0-alpha2 — 2020-12-28
- 1.0.0-alpha1 — 2020-12-28

## README

# vue3-virtual-list

[![npm](https://img.shields.io/npm/v/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list)
[![downloads](https://img.shields.io/npm/dm/vue3-virtual-list.svg)](https://www.npmjs.com/package/vue3-virtual-list)
[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

Scroll list for big acount of data. Based on Vue3.

[live demo](https://waningflow.com/vue3-virtual-list/)

## Install

```
yarn add vue3-virtual-list
```

## Example

```html
<template>
  <div class="list-container">
    <VirtualList :data="dataSource">
      <template v-slot="{ item, index }">
        <div class="item-container">
          <div class="cell cell-index">{{ index + 1 }}</div>
          <div class="cell">{{ item.name }}</div>
          <div class="cell">{{ item.email }}</div>
          <div class="cell">{{ item.address }}</div>
        </div>
      </template>
    </VirtualList>
  </div>
</template>

<script>
  import { VirtualList } from 'vue3-virtual-list';
  import { mock } from './utils';

  export default {
    data() {
      return {
        dataSource: mock(100000),
      };
    },
    components: {
      VirtualList,
    },
  };
</script>

<style>
  .list-container {
    width: 800px;
    height: 600px;
    border: 2px solid #4caf50;
    margin: 0 auto;
  }
  .item-container {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
</style>
```

## Props

| name       | type   | description                                                 | required | default |
| ---------- | ------ | ----------------------------------------------------------- | -------- | ------- |
| data       | Array  | The array of data. Every item is a row.                     | Yes      |         |
| dataKey    | String | Field as key.                                               | No       | id      |
| itemSize   | Number | The height in pixels of each row.                           | No       | 40      |
| poolBuffer | Number | How many rows will be rendered except for the visible ones. | No       | 50      |

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