Content can wrap across lines without an application-owned height calculator.
Changes before the viewport preserve the item currently being read.
Virtual
@sectile/virtual lays out large surfaces whose item sizes and order keep changing. Once an element renders, its browser size updates coordinates from the changed point onward. Inserts, removals, and moves before the viewport also preserve the screen position of the item currently being read.
Install
The command follows the Usage environment selected in the top navigation.
pnpm add vue @sectile/vue @sectile/virtualVariable-height list
This list contains 50,000 rows with different heights. Sectile creates only the rows around the viewport and automatically applies their actual DOM sizes. The code tab shows only the implementation for the selected Usage environment.
Changes before the viewport preserve the item currently being read.
Measured content updates the position of every item that follows it.
Content can wrap across lines without an application-owned height calculator.
Measured content updates the position of every item that follows it.
Content can wrap across lines without an application-owned height calculator.
Changes before the viewport preserve the item currently being read.
<script setup lang="ts">
import { VirtualList } from '@sectile/vue/virtual/list'
const rows = Array.from({ length: 50_000 }, (_, index) => ({
id: `row-${index}`,
title: `Row ${index + 1}`,
lines: Array.from(
{ length: 1 + (index % 3) },
() => 'Content determines this row height.',
),
}))
</script>
<template>
<VirtualList
:items="rows"
:get-key="row => row.id"
>
<template v-slot="{ value: row }">
<article>
<h3>{{ row.title }}</h3>
<p v-for="(line, lineIndex) in row.lines" :key="lineIndex">
{{ line }}
</p>
</article>
</template>
</VirtualList>
</template>What Sectile handles
- Real element sizes: rendered elements can supply their dimensions without a fixed height or an application-owned sizing function.
- Incremental layout: changing one size updates coordinates from the affected range.
- Anchored scrolling: collection and size changes preserve the viewport position of the current anchor.
- Large two-dimensional surfaces: lists, track grids, masonry, and spatial layouts share the same query and measurement flow.
Choose a layout
| Surface | Layout | Read more |
|---|---|---|
| One ordered axis | Linear | Linear lists |
| Many rows and many columns | Track grid | Grid, masonry, and spatial |
| Variable-height cards | Masonry | Grid, masonry, and spatial |
| Application-positioned canvas | Spatial | Grid, masonry, and spatial |
Continue
- Core concepts: viewport, overscan, placement, and anchor.
- Measurement and anchoring: when real sizes and scroll corrections are applied.
- DOM connection: connect existing markup with
createVirtualizer. - Vue connection:
VirtualList,VirtualGrid,VirtualMasonry, andVirtualSpatial. - Benchmark: initial render, scrolling, stabilization time, and visual failures.