Getting Started

Blazing fast scrolling of any amount of data | Demos | Video demo

For Vue 2 support, see here.

Installation

npm install vue-virtual-scroller@next

yarn add vue-virtual-scroller@next

pnpm add vue-virtual-scroller@next

Setup

vue-virtual-scroller ships ESM only. Use it from an ESM-aware toolchain such as Vite, Nuxt, Rollup, or webpack 5.

Plugin import

Install all the components:

import VueVirtualScroller from 'vue-virtual-scroller'

app.use(VueVirtualScroller)

Use specific components:

import { RecycleScroller } from 'vue-virtual-scroller'

app.component('RecycleScroller', RecycleScroller)

WARNING

The CSS file must be imported when using the package:

import 'vue-virtual-scroller/index.css'

Components

There are several components provided by vue-virtual-scroller:

• RecycleScroller — only renders the visible items in your list. It also re-uses components and DOM elements to be as efficient and performant as possible.

• DynamicScroller — wraps RecycleScroller and extends its features to include dynamic size management. The main use case is when you do not know the size of the items in advance. It automatically "discovers" item dimensions as it renders new items during scrolling.

• DynamicScrollerItem — must wrap each item in a DynamicScroller to handle size computations.

• IdState — a mixin that eases local state management in reused components inside a RecycleScroller.

• useRecycleScroller (headless) — low-level composable API to build your own virtual scroller UI without using bundled components.