Virtual Scrolling for Large Lists
vue-virtual-scroller, RecycleScroller, fixing item height vs variable height rendering.
Virtual Scrolling for Large Lists is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Large List Problem
Rendering thousands of DOM nodes is slow and memory-hungry. Virtual scrolling renders only the items currently visible in the viewport, recycling DOM nodes as you scroll.
Installing vue-virtual-scroller
A popular library is vue-virtual-scroller. Install it and import its styles.
npm install vue-virtual-scrollerRegistering the Component
Import RecycleScroller and its CSS, then use it in your component.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";The items Prop
RecycleScroller takes your full data array via the items prop. It never renders all of them at once - only the visible window.
<RecycleScroller :items="rows" />The item-size Prop
item-size tells the scroller the pixel height of each row. With a fixed size it can compute the visible range and total scroll height instantly.
<RecycleScroller
:items="rows"
:item-size="48"
/>The key-field Prop
Give each item a stable identity with key-field so recycled nodes map correctly to data.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>The v-slot Item Template
Use the default scoped slot to render each visible item. The slot exposes the current item.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>Only Visible Items Render
As you scroll, the scroller mounts items entering the viewport and unmounts those leaving it. The DOM node count stays small no matter how long the list is.
Fixed vs Variable Item Height
Fixed heights are fastest because positions are pure arithmetic. When rows vary in height, you need a different approach.
Handling Variable Heights
For variable heights, use DynamicScroller with DynamicScrollerItem, which measures rendered items and adjusts positions.
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>Trade-offs
Virtual scrolling complicates features like in-page find (Ctrl+F), anchor links to off-screen items, and accessibility. Use it only when lists are genuinely large.
Quick Check
What does RecycleScroller actually render to the DOM?
Recap
Virtual scrolling with vue-virtual-scroller's RecycleScroller renders only visible items. Pass the data via items, set item-size and key-field, and render each row in the v-slot template. Use fixed heights for speed, or DynamicScroller for variable heights, and reserve the technique for genuinely large lists.
Frequently asked questions
Is the “Virtual Scrolling for Large Lists” lesson free?
Yes — the full text of “Virtual Scrolling for Large Lists” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Virtual Scrolling for Large Lists”?
vue-virtual-scroller, RecycleScroller, fixing item height vs variable height rendering. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Virtual Scrolling for Large Lists” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- v-memo for Template Memoization
- Profiling with Vue DevTools Performance Tab
- Virtual Scrolling for Large Lists
- Web Workers with Vue