@preflow/vue

Early testing phase — APIs may change before 1.0.

Vue 3 composables and accessible convenience components for predictive virtualization.

bun add @preflow/vue

<script setup lang="ts">
import { VirtualList } from "@preflow/vue";

defineProps<{ rows: Array<{ id: string; label: string }> }>();
</script>

<template>
  <VirtualList
    :data="rows"
    :item-key="row => row.id"
    :item-size="(row, _index, width) => getRowHeight(row, width)"
    style="height: 480px"
  >
    <template #default="{ item }"><ResultRow :row="item" /></template>
  </VirtualList>
</template>

VirtualList derives count and rendering from data. TextList remains available as the lower-level count/index component. VirtualGrid, VirtualMasonry, and VirtualChat are compatibility names for the current low-level components while their data-first contracts are developed.

count, layout options, layoutKey, and responsive column options accept refs. The item-layout composables useFlow, useGrid, useMasonry, and useChat expose rendered items, total height, viewport and rendered ranges, exact edge distances and flags, isScrolling, scrollDirection, smooth scroll helpers, relayout, and onRenderRangeChange. Set edgeThreshold to control how close to an edge counts as isAtStart or isAtEnd. useProse provides the corresponding line-oriented API, and component methods are available through template refs.

Use initialViewport for useful SSR output and layoutKey when an item's size changes without its key changing. itemKey currently controls Vue reconciliation and invalidation detection; scroll anchoring remains index-based until the key-aware mutation engine lands.

See the full guide and live examples.