vue-virtual-scrollerをnuxtプロジェクトでつかってみる

仮想スクロールライブラリであるvue-virtual-scrollerを使ってみる チャットとか大量のリストを表示するときに表示されているところだけdomを作ってくれる系のライブラリ

github.com

• インストール

npm install --save vue-virtual-scroller

typescript用に型ファイル(@types/vue-virtual-scroller.d.ts)を作成

declare module 'vue-virtual-scroller'

• 初期化plugin plugins/vueVirtualScroller.tsを作成

import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'

Vue.use(VueVirtualScroller)

nuxt.config.tsに作成したpluginファイルを追記

// 省略
  plugins: [
    '@/plugins/vueVirtualScroller' // 追記
  ],
// 省略

• 使い方

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script>
export default {
  props: {
    list: Array,
  },
}
</script>

<style scoped>
.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>
~~~