Virtual Scroll Grid For Vue.js


A reusable virtual scroller for Vue 3 that supports big amount grid items with high scroll performance.

How to use it:

1. Import the component.

import Grid from "../Grid.vue";

2. Create a basic virtual scroll grid.

  <template v-slot:probe>
    <ProductItem sizes="(min-width: 768px) 360px, 290px" />
  <template v-slot:placeholder="{ style }">
    <ProductItem :style="style" sizes="(min-width: 768px) 360px, 290px" />
  <template v-slot:default="{ item, style }">
      :price="item.price * 100"
      :compare-at-price="item.compare_at_price * 100"
      :published-at="new Date(item.published_at)"
      sizes="(min-width: 768px) 360px, 290px"

3. All default props.

interface Props {
  // The number of items in the list.
  // Required and must be an integer and greater than or equal to 0.
  length: number;
  // The callback that returns a page of items as a promise.
  // Required.
  pageProvider: (pageNumber: number, pageSize: number) => Promise<unknown[]>;
  // The number of items in a page from the item provider (e.g. a backend API).
  // Required and must be an integer and greater than 1.
  pageSize: number;


Virtual Scroll Grid For Vue.js


v1.4.2 (04/01/2022)

  • bugfixes

v1.4.1 (03/19/2022)

  • bugfixes

v1.4.0 (02/12/2022)

  • support non-window scroll parent regarding the scrollTo prop

v1.3.0 (01/21/2022)

  • support debouncing calls to page provider

v1.2.4 (12/22/2021)

  • fix: type generation without vite-dts

v1.2.3 (11/20/2021)

  • Bug Fixes

v1.2.2 (11/18/2021)

  • avoid over rendering

v1.2.1 (09/19/2021)

  • Bug Fixes

Download Details:

Author: rocwang

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-virtual-scroll-grid

You Might Be Interested In:

Add Comment