Fast Virtual List Component For Vue 3

Install & Download:

MIT

Description:

A lightweight, fast, type-safe virtual list component for Vue 3.

How to use it:

1. Import and register the virtual list component.

import { defineComponent } from 'vue';
import { createVirtualScroller } from 'vue-typed-virtual-list';
export default defineComponent({
  components: {
    VirtualScroller: createVirtualScroller<User>()
  },
})

2. Basic usage.

<template>
  <div>
    <VirtualScroller
      :default-size="30"
      :items="someArrayOfUsers"
    >
      <template #item="{ ref, offset, index }">
        {{ ref.name }}
      </template>
    </VirtualScroller>
  </div>
</template>

type User = {
  id: number;
  name: string;
  email: string;
};

export default defineComponent({
  components: {
    VirtualScroller: createVirtualScroller<User>()
  },
  data: () => ({
    someArrayOfUsers: Array
      .from(Array(100))
      .map((_, i) => ({
        id: i + 1,
        name: 'Name',
        email: 'Email'
      }))
  })
})