Registry / web-framework / vue-virtual-scroll-list

vue-virtual-scroll-list

library2.3.5jsnpmunverified

Vue Virtual Scroll List (current stable version 2.3.5) is a high-performance Vue 2 component designed to efficiently render large datasets as scrollable lists. It addresses the performance challenges of rendering thousands of items by only rendering the visible subset, significantly improving user experience. Key differentiators include its simple API with only three required props (`data-key`, `data-sources`, `data-component`), automatic item size calculation (eliminating the need for fixed-height items), and efficient rendering. The library appears to be actively maintained, with regular minor updates addressing bug fixes and small enhancements, as evidenced by recent patch releases in the 2.x series.

web-framework

npm install vue-virtual-scroll-list

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-VIRTUAL-SCROLL

vue-virtual-scroll-list

web-frameworkjavascriptv2.3.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VirtualList

✓ import VirtualList from 'vue-virtual-scroll-list'

✗ import { VirtualList } from 'vue-virtual-scroll-list'

The `VirtualList` component is exported as the default export of the package.

VirtualList

✓ const VirtualList = require('vue-virtual-scroll-list').default

✗ const VirtualList = require('vue-virtual-scroll-list')

For CommonJS environments, access the default export via `.default` due to the package's ESM-first structure or transpilation.

This example demonstrates how to set up `vue-virtual-scroll-list` in a Vue component, passing a large dataset and a custom item component. It highlights the essential `data-key`, `data-sources`, and `data-component` props, along with making the container scrollable.

// RootComponent.vue <template> <div style="height: 360px; overflow-y: auto;"> <VirtualList :data-key="'uid'" :data-sources="items" :data-component="itemComponent" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import VirtualList from 'vue-virtual-scroll-list'; import ItemComponent from './ItemComponent.vue'; // Your custom item component interface Item { uid: string; text: string; // ... other item properties } export default defineComponent({ name: 'RootComponent', components: { VirtualList, }, data() { // Generate some dummy data for demonstration const items: Item[] = Array.from({ length: 10000 }, (_, i) => ({ uid: `unique_${i}`, text: `Item number ${i + 1}`, })); return { itemComponent: ItemComponent, items: items, }; }, }); </script> // ItemComponent.vue <template> <div :style="itemStyle">{{ index }} - {{ source.text }}</div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; interface ItemSource { uid: string; text: string; // ... other item properties } export default defineComponent({ name: 'ItemComponent', props: { index: { // index of current item in the list type: Number, required: true }, source: { // the data object for the current item type: Object as PropType<ItemSource>, default: () => ({}) }, // 'itemStyle' is internally passed by VirtualList, but can be customized itemStyle: { type: Object as PropType<Record<string, string>>, default: () => ({}) } } }); </script>

Debug

Known issues

breakingThe `data-model` prop was renamed to `data-component` in version 2.0.0. Components using `data-model` will stop rendering items.

fix

Update your component usage from `:data-model="YourComponent"` to `:data-component="YourComponent"`.

affects: >=2.0.0

breakingThe prop used for unique identification was renamed from `data-uid` to `data-key` in version 2.0.0.

fix

Change `:data-uid="'id'"` to `:data-key="'id'"`.

affects: >=2.0.0

gotchaThe container wrapping `VirtualList` must have a defined height and `overflow-y: auto` (or `scroll`) for the virtualization to work correctly. Without these, the list will render all items at once or not scroll.

fix

Ensure your `VirtualList` parent or `VirtualList` itself has `style="height: Xpx; overflow-y: auto;"` (or similar CSS) applied.

affects: >=1.0.0

gotchaThe `data-key` prop's value must be *globally unique* across all items in `data-sources`. Duplicate keys can lead to incorrect rendering, miscalculations of item sizes, or visual glitches.

fix

Ensure the property specified by `data-key` (e.g., `'uid'`) holds a unique value for every object in your `data-sources` array. If your data doesn't naturally have a unique key, generate one.

affects: >=1.0.0

Errors

Common errors & fixes

RangeError: Maximum call stack size exceeded

The parent container for `VirtualList` is not scrollable or does not have a defined height, causing the list to attempt rendering all items at once.

fix

Add `height` and `overflow-y: auto` (or `scroll`) CSS properties to the container wrapping `VirtualList` or to the `VirtualList` component itself.

Component template requires a single root element

Duplicate values detected for the `data-key` prop across your `data-sources` array, leading to rendering conflicts.

fix

Verify that the property specified by `data-key` (e.g., `'id'` or `'uid'`) is unique for every item in your `data-sources`. If necessary, generate a unique ID for each item.

Failed to mount component: template or render function not defined.

The `data-component` prop is not correctly imported or registered, or the path to the item component is wrong.

fix

Ensure your `ItemComponent.vue` is correctly imported (e.g., `import ItemComponent from './ItemComponent.vue'`) and assigned to `data-component`.

TypeError: Cannot read properties of undefined (reading 'text')

The `source` prop in your `ItemComponent` attempts to access a property that does not exist on the item object passed from `data-sources`, or `data-sources` itself is malformed.

fix

Check the structure of your objects in the `data-sources` array and ensure that your `ItemComponent`'s template and script correctly reference existing properties on the `source` prop.

Upgrade

Version history

2.3.5latest on npm

Audit

Dependencies

vuerequiredRuntime dependency as a Vue component library; requires Vue 2.3.0 or higher.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tangbc/vue-virtual-scroll-list ↗

packagehttps://www.npmjs.com/package/vue-virtual-scroll-list ↗