Lazily load your list! Supports only Vue 3
- ⚡ Ultra-fast & Lightweight: ~1.3kB when minified/gzipped, see bundle stats.
- 🦾 Type Strong: Written in Typescript, with TS Docs.
- 🔋 Automatic Unload: Invisible elements are unloaded.
npm i vue-lazy-list
<template>
<LazyList v-slot="{ data, index }" :dataset="list" :initial-items="15" :buffer="5">
<LazyListItem :unrender-delay="3000" :min-height="50" class="item-wrapper">
{{ data }}
</LazyListItem>
</LazyList>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { LazyList, LazyListItem } from 'vue-lazy-list';
const list = ref([...Array(10000).keys()]);
</script>
Note: Always apply margin styles on the item wrapper to accurately calculate height.
MIT License © 2021-PRESENT dapotatoman