Virtual Scroll

Only the rows near the viewport are in the DOM, so lists, grids, tables and masonry layouts stay fast however long they get.

Documentation

Props, slots, composables and types, plus the parts that need more than a table: sizing, performance, authoring recycled rows, SSR, tables and masonry.

Configurator / Code Generator

Select the features you need and generate complete typed Vue code: a component, a composable, or a CodePen.

Comparison with Alternatives

How this library stacks up against other Vue 3 virtualization solutions.

Essentials
Essential

Vertical Fixed

Rows of one height; only the visible ones are rendered.

Essential

Vertical Dynamic

Variable row heights, measured with ResizeObserver.

Essential

Vertical Fixed Body

The browser window as the scroll container, with fixed rows.

Essential

Vertical Dynamic Body

Native window scrolling with variable item heights.

Essential

Horizontal Fixed

A horizontal strip of fixed-width items.

Essential

Horizontal Dynamic

Horizontal scrolling with variable, measured item widths.

Essential

Grid Fixed

Rows and columns virtualized at once, with fixed sizes.

Essential

Grid Dynamic

Rows and columns virtualized at once, with column widths from a function.

Essential

Flow Table

Virtualized rows in a real flow table with dynamic heights and column-width modes.

Essential

Masonry Grid

Masonry columns in one scroll container, from the model's heights or from the DOM.

Features
Feature

Infinite Scroll

Loads the next page as you approach the end, with a loading row.

Feature

Scroll Restoration

Keeps the view in place when items are prepended.

Feature

Sticky Sections

Section headers that stick and get pushed out by the next one.

Feature

SSR Support

Pre-renders a range on the server and scrolls to it on the client.

Feature

Custom Scrollbar

Virtual scrollbars you can style, or replace with your own markup.

Feature

Independent Scrollbars

Use VirtualScrollbar components standalone to control any scrollable element.

Feature

Scroll Snapping

Automatically align to the nearest item after scrolling stops.

Patterns & Recipes
Pattern

Chat Interface

Chat with dynamic heights, an initial scroll to bottom, and history restoration when older messages are prepended.

Pattern

Blog Posts

Blog feed with dynamic heights and on-demand post loading.

Pattern

Async Content

Virtualized feed whose rows fetch simulated content on demand, with a shared cache and auto-measured heights.

Pattern

Live Streaming

A simulated market feed that mutates only the visible window of 5,000 virtualized symbols.

Pattern

Table

Virtualized rows in real table markup.

Pattern

Spreadsheet

Excel-like bidirectional grid with sticky row and column headers and resizable cells.

Pattern

Data Browser

Grouped directory with sticky section headers, instant search and jump-to navigation.

Pattern

Code Viewer

Browse and search the real simdutf source file used in the code diff example.

Pattern

Log Viewer

Filter and search 200,000 lazy generated log lines with virtualization.

Pattern

Side-by-Side Code Diff

Synced side-by-side virtualized diff of two code versions with search and highlighted changes.

Pattern

Search & Highlight

Data-layer search over virtualized content with the CSS Custom Highlight API (Ctrl+K).

Pattern

Collapsible Tree

Expand and collapse nodes in a long hierarchical list.

Pattern

Draggable List

Reorder rows with native drag and drop.

Pattern

Photo Gallery

Virtualized photo grid whose placeholders hold each image's space until it loads.

Pattern

Masonry Gallery

Remote images in a single masonry container: aspect-ratio oracle heights and bounded low-priority prefetch.

Pattern

Layout Switcher

One dataset shown as a virtualized list, grid or data table - only the virtualization unit changes.