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.


    npm i vue-clusterize

    DownloadsWeekly Downloads






    Last publish


    • paulpflug