Virtualize Large Lists to Avoid DOM Overload

Impact: HIGH - Rendering all items in a large list (hundreds or thousands) creates massive amounts of DOM nodes. Each node consumes memory, slows down initial render, and makes updates expensive. List virtualization only renders visible items, dramatically improving performance.

Use a virtualization library when dealing with lists that could exceed 50-100 items, especially if items have complex content.

Task List

Identify lists that render more than 50-100 items
Install a virtualization library (vue-virtual-scroller, @tanstack/vue-virtual)
Replace standard v-for with virtualized component
Ensure list items have consistent or estimable heights
Test with realistic data volumes during development

Recommended Libraries

Library	Best For	Notes
`vue-virtual-scroller`	General use, easy setup	Most popular, good defaults
`@tanstack/vue-virtual`	Complex layouts, headless	Framework-agnostic, flexible
`vue-virtual-scroll-grid`	Grid layouts	2D virtualization
`vueuc/VVirtualList`	Naive UI projects	Part of Naive UI ecosystem

BAD:

vue

<script setup>
import { onMounted, ref } from 'vue'

import UserCard from './UserCard.vue'

const users = ref([])

onMounted(async () => {
  // 10,000 DOM nodes created, browser struggles
  users.value = await fetchAllUsers()
})
</script>

<template>
  <!-- BAD: Renders ALL 10,000 items immediately -->
  <div class="user-list">
    <UserCard
      v-for="user in users"
      :key="user.id"
      :user="user"
    />
  </div>
</template>

GOOD:

vue

<script setup>
import { onMounted, ref } from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'

import UserCard from './UserCard.vue'

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

const users = ref([])

onMounted(async () => {
  // 10,000 items in memory, but only ~20 DOM nodes
  users.value = await fetchAllUsers()
})
</script>

<template>
  <!-- GOOD: Only renders ~20 visible items at a time -->
  <RecycleScroller
    v-slot="{ item }"
    class="user-list"
    :items="users"
    :item-size="80"
    key-field="id"
  >
    <UserCard :user="item" />
  </RecycleScroller>
</template>

<style scoped>
.user-list {
  height: 600px; /* Container must have fixed height */
}
</style>

Using @tanstack/vue-virtual

vue

<script setup>
import { useVirtualizer } from '@tanstack/vue-virtual'
import { ref } from 'vue'

const users = ref([/* 10,000 users */])
const parentRef = ref(null)

const rowVirtualizer = useVirtualizer({
  count: users.value.length,
  getScrollElement: () => parentRef.value,
  estimateSize: () => 80, // Estimated row height
  overscan: 5 // Render 5 extra items above/below viewport
})
</script>

<template>
  <div ref="parentRef" class="list-container">
    <div
      :style="{
        height: `${rowVirtualizer.getTotalSize()}px`,
        position: 'relative',
      }"
    >
      <div
        v-for="virtualRow in rowVirtualizer.getVirtualItems()"
        :key="virtualRow.key"
        :style="{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: `${virtualRow.size}px`,
          transform: `translateY(${virtualRow.start}px)`,
        }"
      >
        <UserCard :user="users[virtualRow.index]" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.list-container {
  height: 600px;
  overflow: auto;
}
</style>

Dynamic Heights with vue-virtual-scroller

vue

<script setup>
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
</script>

<template>
  <!-- For variable height items, use DynamicScroller -->
  <DynamicScroller
    :items="messages"
    :min-item-size="54"
    key-field="id"
  >
    <template #default="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :data-index="index"
      >
        <ChatMessage :message="item" />
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

Performance Comparison

Approach	100 Items	1,000 Items	10,000 Items
Regular v-for	~100 DOM nodes	~1,000 DOM nodes	~10,000 DOM nodes
Virtualized	~20 DOM nodes	~20 DOM nodes	~20 DOM nodes
Initial render	Fast	Slow	Very slow / crashes
Virtualized render	Fast	Fast	Fast

When NOT to Virtualize

Lists under 50 items with simple content
Lists where all items must be accessible to screen readers simultaneously
Print layouts where all content must render
SEO-critical content that must be in initial HTML