vue-lazy-list

Vue Lazy List

Lazily load your list! Supports only Vue 3

🚀 Features

• ⚡ 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.

📦 Install

npm i vue-lazy-list

🦄 Usage

<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.

📄 License

MIT License © 2021-PRESENT dapotatoman