explaingit

akryum/vue-virtual-scroller

10,750TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A Vue.js component library that makes lists with thousands of items scroll fast and smoothly by only rendering the items currently visible on screen, keeping memory low regardless of total list size.

Mindmap

mindmap
  root((vue-virtual-scroller))
    What it does
      Virtual scrolling
      Render visible items only
      Large list performance
    Components
      RecycleScroller
      DynamicScroller
    Compatibility
      Vue 3 current
      Vue 2 separate branch
      Vite and Nuxt
    Use cases
      Data tables
      Long feeds
      Infinite lists
    Audience
      Vue developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Render a list of 10,000 items in a Vue 3 app without browser slowdowns by swapping in virtual scrolling.

USE CASE 2

Build a data feed or table that loads and displays large datasets smoothly with consistent scroll performance.

USE CASE 3

Replace a slow long list in an existing Vue 3 or Nuxt project with a drop-in virtual scroller component.

Tech stack

TypeScriptVue 3Vitenpm

Getting it running

Difficulty · easy Time to first run · 30min

Current version targets Vue 3 with ESM-only build tools (Vite, Nuxt, webpack 5), Vue 2 support is on a separate branch of the same repository.

In plain English

Vue Virtual Scroller is a component library for Vue.js that makes scrolling through large lists and datasets fast and smooth. Instead of rendering every item in a list all at once, which can slow down or crash a browser when there are thousands of rows, this library only renders the items currently visible on screen. As you scroll, new items are added to the page and offscreen items are removed, keeping memory usage and rendering time low regardless of how many total items you have. The technique this library uses is called virtual scrolling. It is a well-established approach for large data displays in web applications. The practical result is that a list with ten thousand items performs much the same as a list with ten items, because at any given moment only the visible slice exists in the browser's page structure. The current version targets Vue 3 and ships in ESM format only. ESM, short for ECMAScript Modules, is the modern JavaScript module format. The library works with ESM-aware build tools such as Vite, Nuxt, Rollup, and webpack 5. Projects on an older stack may need to check compatibility before adding it. If you are working on a Vue 2 project, the first version of the library is maintained on a separate branch of the same repository. Setting up the library in a Vue 3 project with Vite or Nuxt follows the same steps as adding any other npm package. A live demo and a video demo are linked from the README, and a dedicated documentation site covers the full component API and available options. The README in this repository is brief and points to external resources for detailed usage. Full instructions, component props, slots, and examples are on the documentation site rather than in the repository itself.

Copy-paste prompts

Prompt 1
I have a Vue 3 app with a list of 50,000 items that is slow to render. Show me how to install vue-virtual-scroller and replace my v-for list with a RecycleScroller component.
Prompt 2
Using vue-virtual-scroller in a Nuxt 3 project, set up a virtual scrolling list where each item is a user card component. Show the component setup and template.
Prompt 3
How do I use vue-virtual-scroller with items of variable heights instead of fixed height? Show the DynamicScroller component example.
Prompt 4
I need to add virtual scrolling to a Vue 3 + Vite project. Walk me through installation, plugin registration in main.js, and basic RecycleScroller usage with a list of objects.
Prompt 5
My project uses Vue 2 and I want to use vue-virtual-scroller. How do I install the correct version and what branch or package should I use?
Open on GitHub → Explain another repo

← akryum on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.