vlist-vue

Vue composable for @floor/vlist — lightweight, zero-dependency virtual scrolling.

Install

npm install @floor/vlist vlist-vue

Quick Start

<script setup>
import { useVList } from 'vlist-vue';
import '@floor/vlist/styles';

const { containerRef, instance } = useVList({
  item: {
    height: 48,
    template: (user) => `<div class="user">${user.name}</div>`,
  },
  items: users,
});
</script>

<template>
  <div ref="containerRef" style="height: 400px" />
</template>

API

• useVList(config) — Creates a virtual list. Returns { containerRef, instance }. Config can be a plain object or a reactive Ref for automatic updates.
• useVListEvent(instance, event, handler) — Subscribe to vlist events with automatic cleanup.

Config accepts all @floor/vlist options minus container (handled by the ref). Feature fields like adapter, grid, groups, selection, scrollbar, and estimatedHeight are translated into .use(withX()) calls automatically.

Documentation

Full usage guide, feature config examples, and TypeScript types: Framework Adapters — Vue

License

MIT © Floor IO