vue-list-scroller

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

Notes

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

Usage

Add package to your project

npm install vue-list-scroller --save

Create item component

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

<script>
export default {
  props: {
    data: Object,
    index: Number,
  },
}
</script>

Add ListScroller component to your project

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

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

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

Example

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

npm install
npm run serve

Props

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

Events

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

Simple and easy to use Vue.js component for efficient rendering large lists