Virtual scrollers
The v-virtual-scroll component displays a virtual, infinite list. It supports dynamic height and scrolling vertically and is a good alternative to pagination.
Usage
The virtual scroller displays just enough records to fill the viewport and uses the existing component, rehydrating it with new data.
<v-virtual-scroll
:height="300"
:items="['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']"
>
<template v-slot:default="{ item }">
Item {{ item }}
</template>
</v-virtual-scroll>API
| Component | Description |
|---|---|
| v-virtual-scroll | Primary Component |
Anatomy
The v-virtual-scroll component contains only a default slot with no styling options. It is typically used with large collections of v-list-items.
| Element / Area | Description |
|---|---|
| 1. Container | The rendered content area from the provided items prop |
Guide
The v-virtual-scroll allows you to display thousands of records on a single page without the performance hit of actually showing all of them at once. v-virtual-scroll is devoid of styling and pairs well with components such as v-card to provide a better visual experience.
Props
The v-virtual-scroll component has a small API mainly used to configure the root and item height.
Height
The v-virtual-scroll component does not have any initial height set on itself.
The following code snippet uses the height prop:
Another way of making sure that the component has height is to place it inside an element with display: flex.
Item Height
For lists where the item height is static and uniform for all items, it’s recommended that you define a specific item-height. This value is used for v-virtual-scroll’s calculations.
If your items are not of a uniform size, omit the item-height prop to have v-virtual-scroll dynamically calculate each item.
Renderless
Renderless mode does not generate DOM nodes automatically, so you must bind itemRef yourself for virtual scrolling to work properly.
💡 The height prop should be a plain number, or a value with units like px and vh, but not the percentage (%).
| # | Name | Icon |
|---|---|---|
| 1 | Item #0001 | 🍄 |
| 2 | Item #0002 | 🌼 |
| 3 | Item #0003 | 🌵 |
| 4 | Item #0004 | 🌲 |
| 5 | Item #0005 | 🌰 |
| 6 | Item #0006 | 🍅 |
| 7 | Item #0007 | 🍊 |
| 8 | Item #0008 | 🍓 |
| 9 | Item #0009 | 🍄 |
| 10 | Item #0010 | 🌼 |
| 11 | Item #0011 | 🌵 |
| 12 | Item #0012 | 🌲 |
| 13 | Item #0013 | 🌰 |
| 14 | Item #0014 | 🍅 |
| 15 | Item #0015 | 🍊 |
| 16 | Item #0016 | 🍓 |
| 17 | Item #0017 | 🍄 |
| 18 | Item #0018 | 🌼 |
| 19 | Item #0019 | 🌵 |
| 20 | Item #0020 | 🌲 |
| 21 | Item #0021 | 🌰 |
| 22 | Item #0022 | 🍅 |
| 23 | Item #0023 | 🍊 |
| 24 | Item #0024 | 🍓 |
| 25 | Item #0025 | 🍄 |
| 26 | Item #0026 | 🌼 |
| 27 | Item #0027 | 🌵 |
| 28 | Item #0028 | 🌲 |
| 29 | Item #0029 | 🌰 |
| 30 | Item #0030 | 🍅 |
| 31 | Item #0031 | 🍊 |
| 32 | Item #0032 | 🍓 |
| 33 | Item #0033 | 🍄 |
| 34 | Item #0034 | 🌼 |
| 35 | Item #0035 | 🌵 |
| 36 | Item #0036 | 🌲 |
| 37 | Item #0037 | 🌰 |
| 38 | Item #0038 | 🍅 |
| 39 | Item #0039 | 🍊 |
| 40 | Item #0040 | 🍓 |
| 41 | Item #0041 | 🍄 |
| 42 | Item #0042 | 🌼 |
| 43 | Item #0043 | 🌵 |
| 44 | Item #0044 | 🌲 |
| 45 | Item #0045 | 🌰 |
| 46 | Item #0046 | 🍅 |
| 47 | Item #0047 | 🍊 |
| 48 | Item #0048 | 🍓 |
| 49 | Item #0049 | 🍄 |
| 50 | Item #0050 | 🌼 |
Examples
The following is a collection of v-virtual-scroll examples that demonstrate how different the properties work in an application.
User Directory
The v-virtual-scroll component can render an large amount of items by rendering only what it needs to fill the scroller’s viewport.