Virtual Scrolling Grid For Vue.js

Install & Download:

# NPM
$ npm i vue-virtual-grid --save

Description:

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: {
  VirtualGrid,
  // ...
},

3. Add the Virtual Grid to the template.

<VirtualGrid
  :items="yourDataSet"
  :updateFunction="yourGetDataFunction"
  :getGridGap="yourFunction"
  :getColumnCount="yourFunction"
  :getWindowMargin="yourFunction"
  :getItemRatioHeight="yourFunction"
  :updateTriggerMargin="number"
  :loader="loaderComponent"
  :debug="false"
/>

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 
}