RecycleScroller has all items in dom

[AlexKharenko]

trafficstars

Describe the bug

I use nuxt 3 and have registered components in plugin. Here is my component usage code:

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :itemSize="TABLE_ROW_SIZE"
    :keyField="'id'"
    :prerender="30"
  >
    <template v-slot="{ item }">
      <div class="table-row">
        <div class="table-cell">{{ item.label }}</div>
      </div>
    </template>
  </RecycleScroller>
</template>

<script setup lang="ts">
const TABLE_ROW_SIZE = 40;

const items = useState(() => [] as any[]);

if (process.server)
  items.value = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    label: `Row ${i}`,
  }));
</script>

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

</style>

I have all 1000 items rendered in the dom and also when it comes from ssr, it jumps to 40px height.

I've noticed that it pre-renders correct amount of data when it comes from ssr but then it renders all data when it mounted.

Reproduction

Code above. I use nuxt 3, vue-virtual-scroller: "^2.0.0-beta.8".

System Info

Ark browser.

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ganya-qwe]

try to use pageMode prop, it worked for me