When you’re rendering a large collection of data on the app, you might find the browser gets slow when loading.
To address this, you need the Virtual Scrolling technology to display your big amount data list efficiently and performantly.
What Is Virtual Scrolling?
Virtual scrolling enables a performant way to simulate all items being rendered by making the height of the container element the same as the height of the total number of elements to be rendered, and then only rendering the items in view.
Virtual scrolling is one of the powerful features of Vue.js. If you frequently display long lists, virtual scroll can improve the user experience a lot by keeping only the necessary items visible while loading new data as needed.
The Best Virtual Scrolling Component For Vue.js
When building your next Vue.js app, you may find yourself needing elements to scroll smoothly and responsively without making an AJAX request to the server.
Virtual Scrolling is a great feature that helps make this happen. You can quickly browse a large data set without having the server render everything all at once.
Therefore, based on the above factors, we have listed down the 7 best Vue.js components for virtual scrolling, which can be used to help enhance the data rendering and optimize the load speed. Have fun!
Originally published Aug 30 2020, updated Mar 23 2026
1. Vue Virtual Scroller Component
A Vue Virtual Scroller Component allows for smooth scroll with any amount of data.
2. TanStack Virtual
A headless, framework‑agnostic virtualization library for rendering massive lists, grids, and tables at 60FPS while giving you full control over markup and styles.
- Smooth 60FPS scrolling with sticky items and window‑scrolling utilities
- Framework‑agnostic & headless
- Virtualizes vertical, horizontal & grid layouts with a single hook/function
- Lightweight (10–15kb) yet powerful, with dynamic & measured sizing support
3. Easy Vue Virtual Scroll List Component
A Vue component supports big data by using virtual scroll list. Tiny, smooth, and without any dependence.
Features:
- Only 3 required props, simple and very easy to use.
- Big data list with high render performance and efficient.
- You don’t have to care about item size, it will calculate automatic.
4. virtua
A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
Features:
- Zero-config virtualization: This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, iOS support, etc).
- Fast: Natural virtual scrolling needs optimization in many aspects (eliminate frame drops by reducing CPU usage and GC, reduce synchronous layout recalculation, reduce visual jumps on repaint, optimize with CSS, optimize for frameworks, etc). We are trying to combine the best of them.
- Small: Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and tree-shakeable. The total size for React is ~5kB gzipped.
- Flexible: Aiming to support many usecases – fixed size, dynamic size, horizontal scrolling, reverse scrolling, RTL, mobile, infinite scrolling, scroll restoration, DnD, keyboard navigation, sticky, placeholder and more.
5. Sortable Virtual Scrolling List Component For Vue 3
A virtual scrolling list component that can be sorted by dragging an item in the list (drag and drop sorting) and the individual items can have custom styles. Compatible with Vue 3 and Vue 2.
6. vue-typed-virtual-list
A fast, type-safe virtual list component for rendering massive data. Works with Vue 3.
Features:
- Extremely efficient calculations
- Provides generic type safety inside the
#itemslot - Automatically and transparently deals with variable element heights
- Small footprint. <10KB gzipped, including dependencies
7. vue-virtual-list
Yet another virtual scrolling list component for Vue.
Conclusion:
Any of these Vue.js components for virtual scrolling are simple to implement and highly effective in their implementation.
They can be used for many different types of projects and applications, so give them a try and see how they work out for yourself.
For more information on specific implementations, you can refer to the links above or visit the official documentation provided by each of the developers on their respective sites.