Virtual Scrolling Grid For Vue.js

A Vue.js component to render a high-performance virtual scrolling grid using CSS Grid Layout.

More Features:

  • Supports any Vue.js component.
  • Infinite Scroll is supported as well.

How to use it:

1. Import the component.

import VirtualGrid from ‘vue-virtual-grid’;

2. Register the component.

components: {
  // ...

3. Add the Virtual Grid to the template.


4. Define your data set in items object.

  // unique ID
  id: string,
  // custom param, pass an object with what you want inside (optional)
  injected?: string, 
  // original height of the item
  height: number, 
  // original width of the item (optional: if not set, height will not be adjusted by getItemRatioHeight)
  width?: number, 
  // how many columns will use your item (set 0 if you want the full width)
  columnSpan: number, 
  // if the item should appear on the next row (optional)
  newRow?: boolean, 
  // A VueJS component (custom template of your choice) to render the item (passed as prop `item`)
  renderComponent: Component 


Virtual Scrolling Grid For Vue.js


v2.5.0 (05/05/2022)

  • allow to use the scrolling container inside a div
  • child elements now have a class to target them
  • fix warning on component name

v2.4.0 (02/16/2022)

  • Migrate to Vite builder

v2.3.0 (12/16/2020)

  • Better infinite scroll rendering

Download Details:

Author: Mikescops

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-virtual-grid --save

Add Comment