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. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Virtual Scrolling for Large Lists” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Virtual Scrolling for Large Lists”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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