0.5.1 • Public • Published


An implementation of Clusterize.js in vue.

Works similar to v-for but only takes enough data to fill the viewport 3 times.
This data is then splitted into three clusters which will move and get filled with the right data on scrolling.



Only for webpack workflows.

No jQuery dependency


npm install --save-dev vue-clusterize

use version 0.2.0 before vue 1.0.24


# link the components up 
  "clusterize": require("vue-clusterize")
# or ES6 
import clusterize from "vue-clusterize"
components: {
  "clusterize": clusterize
<clusterize :data="rowsData">
  <!-- default slot will be used as a template for a single row -->
  <!-- (optional) loading slot will be displayed in each cluster which is busy fetching data - only with dynamic data -->
  <p slot="loading">loading...</p>

For examples see dev/.

Available variables in template

Name type description
data Object a single datapiece (see binding-name in props)
loading Number will be 0 when finished loading data (only with dynamic data)
index Number index of the datapiece
height Number the height of a single row

you can add your own variables with the row-watchers prop.


<clusterize @get-data="getData">
  <div v-if="!loading" v-bind:style="{height:height+'px'}">{{data}} - index: {{index}}</div>
  <p slot="loading">loading...</p>


Name type default description
binding-name String "data" name to access the data in your template
height Number null Height of the clusterize element
auto-height Boolean false If autoheight should be used (see below)
manual-start Boolean false rendering doesn't start on ready (call start on the component instance instead)
data Array [] static data to render
scroll-top Number 0 sets scrollTop
scroll-left Number 0 sets scrollLeft
cluster-size-fac Number 1.5 determines the cluster size relative to visible size
row-height Number null enforced row-height, will be determined at runtime when not set
template String - row template (defaults to slot content)
style Object - to pass trough style (vue object)
row-watchers Object {height: {vm: this, prop:"rowHeight"}} variables, will be available in template
parent-vm Object this.$parent where to resolve components in template
flex Boolean false allow multiple items per row. See flex.
flex-initial Number 20 data pieces to take for calculation of row height (should fill several rows)
flex-fac Number 1 reduce to reduce items per row


There are two ways clusterize can be used, either use a fixed height:

<clusterize :data="rowsData" :height="400" v-ref:clusterize>

Or use autoheight:

<html style="height:100%">
  <body style="height:100%">
    <div style="position:relative">
      <clusterize :data="rowsData" auto-height>

In this case clusterize will always fill the nearest parent element with either position:relative; or position:absolute; updateHeight will be called automatically, e.g. on window resize.
Keep in mind, that padding of the parent will be ignored. If you need a padding, use a wrapper <div>.

Dynamic data

The clusterize instance emits two events to get dynamic data:

<clusterize @get-data="getData" @get-data-count="getDataCount">
  # For the first datapiece, first and last will be 0
  getData: function(first,last,cb) {
      # somehow get data
  getDataCount: function(cb) {

To issue a manual redraw, call redraw() on the clusterize instance.

If you want to enforce a scroll-to-top use the scrollTop prop.


When using the flex prop, the usage changes. You will now recieve a array of row items per row which you can use in a v-for:

<clusterize :data="rowsData" flex>
  <clusterize-row style="display:flex;align-items:center;justify-content:space-between">
    <div v-for="d in data">{{d}}</div>

The row height, items per row and rows per cluster will be recalculated on resize of clusterize.


Clone repository.

npm install
npm run test

Browse to http://localhost:8080/.


  • use html5 history mode or to save scroll position


Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Package Sidebar


npm i vue-clusterize

Weekly Downloads






Last publish


  • paulpflug