Vue Virtual Scroller Component

The Vue Virtual Scroller Component allows for smooth scrolling with any amount of data. Compatible with both Vue 3 and Vue 2.

Components Included:

  • RecycleScroller: a component that only renders the visible items in your list. It also re-uses components and dom elements to be as efficient and performant as possible.
  • DynamicScroller: a component that wraps the RecycleScroller component and extends its features to include dynamic size management. The main use case for this is when you do not know the size of the items in advance. The Dynamic Scroller automatically “discovers” item dimensions as it renders new items during scrolling.
  • DynamicScrollerItem: must wrap each item in a DynamicScroller to handle size computations.
  • IdState: a mixin that ease the local state management in reused components inside a RecycleScroller.

How to use it (Vue 3):

1. Import and register the Virtual Scroller Component.

// global
import VueVirtualScroller from 'vue-virtual-scroller'
app.use(VueVirtualScroller)

// specific components
import { RecycleScroller } from 'vue-virtual-scroller'
app.component('RecycleScroller', RecycleScroller)

2. Use the RecycleScroller component to render only visible elements.

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="24"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>
<script>
export default {
  props: {
    list: Array,
  },
}
</script>

3. Render items with unknown sizes.

<template>
  <DynamicScroller
    :items="items"
    :min-item-size="54"
    class="scroller"
  >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[
          item.message,
        ]"
        :data-index="index"
      >
        <div class="avatar">
          <img
            :src="item.avatar"
            :key="item.avatar"
            alt="avatar"
            class="image"
          >
        </div>
        <div class="text">{{ item.message }}</div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>
<script>
export default {
  props: {
    items: Array,
  },
}
</script>

4. Available props for the RecycleScroller component.

itemSize: {
  type: Number,
  default: null,
},
gridItems: {
  type: Number,
  default: undefined,
},
itemSecondarySize: {
  type: Number,
  default: undefined,
},
minItemSize: {
  type: [Number, String],
  default: null,
},
sizeField: {
  type: String,
  default: 'size',
},
typeField: {
  type: String,
  default: 'type',
},
buffer: {
  type: Number,
  default: 200,
},
pageMode: {
  type: Boolean,
  default: false,
},
prerender: {
  type: Number,
  default: 0,
},
emitUpdate: {
  type: Boolean,
  default: false,
},
skipHover: {
  type: Boolean,
  default: false,
},
listTag: {
  type: String,
  default: 'div',
},
itemTag: {
  type: String,
  default: 'div',
},
listClass: {
  type: [String, Object, Array],
  default: '',
},
itemClass: {
  type: [String, Object, Array],
  default: '',
},

5. Available props for the DynamicScroller component.

minItemSize: {
  type: [Number, String],
  required: true,
},

6. Available props for the DynamicScrollerItem component.

item: {
  required: true,
},
watchData: {
  type: Boolean,
  default: false,
},
/**
 * Indicates if the view is actively used to display an item.
 */
active: {
  type: Boolean,
  required: true,
},
index: {
  type: Number,
  default: undefined,
},
sizeDependencies: {
  type: [Array, Object],
  default: null,
},
emitResize: {
  type: Boolean,
  default: false,
},
tag: {
  type: String,
  default: 'div',
},

7. Events.

  • @resize: emitted when the size of the scroller changes.
  • @visible: emitted when the scroller considers itself to be visible in the page.
  • @hidden: emitted when the scroller is hidden in the page.
  • @update (startIndex, endIndex, visibleStartIndex, visibleEndIndex): emitted each time the views are updated, only if emitUpdate prop is true.
  • @scroll-start: emitted when the first item is rendered.
  • @scroll-end: emitted when the last item is rendered.

Preview:

Vue Virtual Scroller Component

Changelog:

v1.1.2 (10/18/2022)

  • small code changes to maximize performance
  • bugfix

v1.1.1 (10/17/2022)

  • fix: height NaN

10/14/2022

  • add an empty slot
  • add skipHover prop to deactive the hover detection
  • adds configurable list/item tags for semantic html
  • custom classes for list wrapper and list items
  • Emit events for scroll to begin and end of list
  • gridItems prop
  • itemSecondarySize
  • throw error when key field does not exist in item
  • update event provide range of the visible items
  • performance Improvements
  • bugfixes

10/11/2022

  • Bugfix

v1.0.10 (04/20/2020)

  • Fixed Cannot set property ‘item’ of undefined

Download Details:

Author: Akryum

Live Demo: https://akryum.github.io/vue-virtual-scroller/

Download Link: https://github.com/Akryum/vue-virtual-scroller/archive/master.zip

Official Website: https://github.com/Akryum/vue-virtual-scroller

Install & Download:

# Yarn
$ yarn add [email protected]

# NPM
$ npm i [email protected]

Add Comment