It can help with creating Twitter-like feed with thousands of items. It renders only visible part of the list.


  • Only page mode. It does not work inside an overflow container
  • Uses ResizeObserver
  • Items can have any size and change dynamically
  • Items can have margins
  • Supports infinite scroll


Add package to your project

npm install vue-list-scroller --save

Create item component

  <div>{{ 'Item ' + index + ' ' + data.text }}</div>

export default {
  props: {
    data: Object,
    index: Number,

Add ListScroller component to your project

    <list-scroller :itemComponent="item" :itemsData="items" :itemHeight="350" />

import ListScroller from 'vue-list-scroller'
import Item from './item'

export default {
  components: { ListScroller },
  data() {
    return {
      items: [{ text: 'first' }, { text: 'second' }],
      item: Item,


You can clone this project and start example locally with these commands. It's in the dev folder.

npm install
npm run serve


  • itemsData: array of the data that is passed to items
  • itemHeight: approximate item height in pixels. it's used only at first rendering
  • itemComponent: vue js item component
  • renderViewports: height of the rendered part relative to viewport height. For example, if it's set to 5 and window inner height is 400, it will render 800 pixels before and after visible part of the list


  • bottom: emits when the last item is rendered. Used for infinite scroll

Similar projects