### Install Dependencies and Run Dev Server

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/demo/README.md

Installs project dependencies using yarn and starts the development server with hot reload.

```bash
# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn run dev
```

--------------------------------

### Full Example of useWindowScroller

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-window-scroller.md

This example demonstrates how to set up and use the `useWindowScroller` composable to virtualize a large list of rows. It includes setup for the scroller, rendering pooled items, and a button to programmatically scroll to a specific item.

```vue
<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue'
import { useWindowScroller } from 'vue-virtual-scroller'

interface Row {
  id: number
  label: string
}

const rows = ref<Row[]>(
  Array.from({ length: 2000 }, (_, index) => ({
    id: index + 1,
    label: `Row ${index + 1}`,
  })),
)

const rootEl = useTemplateRef<HTMLElement>('rootEl')
const beforeEl = useTemplateRef<HTMLElement>('beforeEl')
const afterEl = useTemplateRef<HTMLElement>('afterEl')

const {
  pool,
  totalSize,
  scrollToItem,
  getViewStyle,
} = useWindowScroller(computed(() => ({
  items: rows.value,
  keyField: 'id',
  direction: 'vertical' as const,
  itemSize: 44,
  minItemSize: null,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  shift: false,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
})), rootEl, beforeEl, afterEl)
</script>

<template>
  <section ref="rootEl" class="window-list">
    <header ref="beforeEl" class="window-list__intro">
      <button @click="scrollToItem(500, { align: 'start', smooth: true })">
        Jump to row 501
      </button>
    </header>

    <div class="window-list__inner" :style="{ minHeight: `${totalSize}px` }">
      <div
        v-for="view in pool"
        :key="view.nr.id"
        class="window-list__row"
        :style="getViewStyle(view)">
        {{ (view.item as Row).label }}
      </div>
    </div>

    <footer ref="afterEl" class="window-list__outro">
      End of virtualized content
    </footer>
  </section>
</template>

<style scoped>
.window-list__inner {
  position: relative;
}

.window-list__row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
</style>
```

--------------------------------

### Install vue-virtual-scroller and run skills-npm

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/ai-skills.md

Install the `vue-virtual-scroller` package and then run `npx skills-npm` to expose the bundled skill to AI agents for one-off usage.

```bash
pnpm add vue-virtual-scroller
npx skills-npm
```

--------------------------------

### Install vue-virtual-scroller with yarn

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/index.md

Use this command to install the package using yarn.

```sh
yarn add vue-virtual-scroller
```

--------------------------------

### Install vue-virtual-scroller with npm

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/index.md

Use this command to install the package using npm.

```sh
npm install vue-virtual-scroller
```

--------------------------------

### Install skills-npm as a dev dependency

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/ai-skills.md

Install `skills-npm` as a development dependency to keep skill links up to date after package installs.

```bash
npm i -D skills-npm
```

--------------------------------

### Install vue-virtual-scroller with pnpm

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/index.md

Use this command to install the package using pnpm.

```sh
pnpm add vue-virtual-scroller
```

--------------------------------

### Minimal Fixed-Size Setup

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/use-recycle-scroller.md

Basic setup for useRecycleScroller with fixed item sizes. Ensure the scroller element is referenced using `useTemplateRef`.

```vue
<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useRecycleScroller } from 'vue-virtual-scroller'

const scrollerEl = useTemplateRef<HTMLElement>('scrollerEl')

const { pool, totalSize, getViewStyle } = useRecycleScroller({
  items: rows,
  el: scrollerEl,
  keyField: 'id',
  itemSize: 40,
  minItemSize: null,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  pageMode: false,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
})
</script>
```

--------------------------------

### Basic DynamicScroller Usage

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/dynamic-scroller.md

Demonstrates the fundamental setup for DynamicScroller with item iteration and rendering. Ensure the scroller has a defined height.

```vue
<script>
export default {
  props: {
    items: Array,
  },
}
</script>

<template>
  <DynamicScroller
    :items="items"
    :min-item-size="54"
    class="scroller"
  >
    <template #default="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :index="index"
      >
        <div class="avatar">
          <img
            :key="item.avatar"
            :src="item.avatar"
            alt="avatar"
            class="image"
          >
        </div>
        <div class="text">
          {{ item.message }}
        </div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

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

--------------------------------

### Full Vue.js Virtual Scroller Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-recycle-scroller.md

This example shows a complete implementation of a vertical virtual scroller with 10,000 items. It utilizes `useRecycleScroller` hook to manage the virtualized list and renders only the visible items to optimize performance. Ensure you have `vue-virtual-scroller` installed and imported.

```vue
<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue'
import { useRecycleScroller } from 'vue-virtual-scroller'

interface User {
  id: number
  name: string
}

const items = ref<User[]>(
  Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `User ${i + 1}`,
  })),
)

const scrollerEl = useTemplateRef<HTMLElement>('scrollerEl')

const options = computed(() => ({
  items: items.value,
  keyField: 'id',
  direction: 'vertical' as const,
  itemSize: 40,
  gridItems: undefined,
  itemSecondarySize: undefined,
  minItemSize: null,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  pageMode: false,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
}))

const {
  pool,
  totalSize,
  getViewStyle,
} = useRecycleScroller(options, scrollerEl)
</script>

<template>
  <div
    ref="scrollerEl"
    class="my-scroller"
  >
    <div
      class="my-scroller__inner"
      :style="{ minHeight: `${totalSize}px` }"
    >
      <div
        v-for="view in pool"
        :key="view.nr.id"
        class="my-scroller__item"
        :style="getViewStyle(view)"
      >
        <strong>#{{ view.nr.index }}</strong> {{ (view.item as User).name }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-scroller {
  height: 400px;
  overflow-y: auto;
  position: relative;
  border: 1px solid #ddd;
}

.my-scroller__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.my-scroller__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
}
</style>
```

--------------------------------

### Vue Dynamic Scroller Full Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-dynamic-scroller.md

This example demonstrates the full setup for using the `useDynamicScroller` composable in Vue. It includes defining reactive data, referencing the scroller element, and configuring the composable with item data, key field, direction, minimum item size, and the scroller element itself. The template then iterates over the `pool` to render items, applying the `v-dynamic-scroller-item` directive.

```vue
<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue'
import { useDynamicScroller } from 'vue-virtual-scroller'

const rows = ref([
  { id: 1, title: 'Alpha', body: 'Unknown-size content' },
  { id: 2, title: 'Beta', body: 'This row can wrap and grow' },
])

const scrollerEl = useTemplateRef<HTMLElement>('scrollerEl')

const {
  pool,
  totalSize,
  vDynamicScrollerItem,
} = useDynamicScroller(computed(() => ({
  items: rows.value,
  keyField: 'id',
  direction: 'vertical' as const,
  minItemSize: 48,
  el: scrollerEl.value,
})))
</script>

<template>
  <div
    ref="scrollerEl"
    class="scroller"
  >
    <div :style="{ minHeight: `${totalSize}px`, position: 'relative' }">
      <article
        v-for="view in pool"
        :key="view.id"
        v-dynamic-scroller-item="{ view }"
      >
        <h4>{{ view.item.title }}</h4>
        <p>{{ view.item.body }}</p>
      </article>
    </div>
  </div>
</template>
```

--------------------------------

### Configure prepare script for skills-npm

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/ai-skills.md

Add a `prepare` script to your project's `package.json` to automatically run `skills-npm` after installs, ensuring skill links are updated.

```json
{
  "scripts": {
    "prepare": "skills-npm"
  }
}
```

--------------------------------

### Update useWindowScroller item styling (v2)

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/migrate-v2-to-v3.md

This example shows the manual styling approach for pooled items in `useWindowScroller` before v3.

```vue
<div
  v-for="view in pool"
  :key="view.nr.id"
  :style="{
    transform: `translateY(${view.position}px)`,
    visibility: view.nr.used ? 'visible' : 'hidden',
    pointerEvents: view.nr.used ? undefined : 'none',
  }"
/>
```

--------------------------------

### Variable Item Sizes Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/recycle-scroller.md

Example data structure for items in variable size mode. Each item must have a numeric field representing its size, specified by the `sizeField` prop (defaults to 'size').

```javascript
const items = [
  {
    id: 1,
    label: 'Title',
    size: 64,
  },
  {
    id: 2,
    label: 'Foo',
    size: 32,
  },
  {
    id: 3,
    label: 'Bar',
    size: 32,
  },
]
```

--------------------------------

### Flow-Mode Spacer Layout

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/use-recycle-scroller.md

Example of rendering spacers for flow mode. Use `v-if` to conditionally render start and end spacers based on `startSpacerSize` and `endSpacerSize`.

```vue
<div ref="scrollerEl" class="scroller">
  <div>
    <div v-if="startSpacerSize > 0" :style="{ height: `${startSpacerSize}px` }" />
    <article
      v-for="view in pool"
      :key="view.nr.id"
      :style="getViewStyle(view)"
    >
      {{ view.item.title }}
    </article>
    <div v-if="endSpacerSize > 0" :style="{ height: `${endSpacerSize}px` }" />
  </div>
</div>
```

--------------------------------

### Grid Layout Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/recycle-scroller.md

Illustrates setting up RecycleScroller for a grid layout. Requires `gridItems` and `itemSecondarySize` props in addition to a fixed `itemSize`.

```vue
<RecycleScroller
  :items="cards"
  :item-size="166"
  :grid-items="5"
  :item-secondary-size="176"
>
  <template #default="{ item }">
    <article>{{ item.name }}</article>
  </template>
</RecycleScroller>
```

--------------------------------

### Install all components using Vue plugin

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/index.md

Import and use the VueVirtualScroller plugin to register all available components globally in your Vue application.

```js
import VueVirtualScroller from 'vue-virtual-scroller'

app.use(VueVirtualScroller)
```

--------------------------------

### Basic WindowScroller Usage

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/window-scroller.md

Demonstrates the basic setup for WindowScroller, including importing the component, defining a list of items, and rendering them within the scroller. The list stays in normal page flow with content before and after it.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { WindowScroller } from 'vue-virtual-scroller'

const rows = ref(
  Array.from({ length: 1000 }, (_, index) => ({
    id: index + 1,
    label: `Row ${index + 1}`,
  })),
)
</script>

<template>
  <section class="page-content-before">
    Content before the list
  </section>

  <WindowScroller
    v-slot="{ item }"
    :items="rows"
    :item-size="40"
    key-field="id"
  >
    <div class="row">
      {{ item.label }}
    </div>
  </WindowScroller>
</template>
```

--------------------------------

### Install All Bundled Components

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/SKILL.md

Register all components from the vue-virtual-scroller package globally using app.use(). This makes all components available throughout your Vue application.

```js
import { createApp } from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'

const app = createApp(App)
app.use(VueVirtualScroller)
```

--------------------------------

### Semantic Table with Dynamic Virtualization

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/use-table-column-widths.md

This example demonstrates integrating useTableColumnWidths with useDynamicScroller for a semantic table. It sets up column widths based on content and locks them, while the table content is virtualized for performance. Ensure the table element and scroller element refs are correctly assigned.

```vue
<script setup lang="ts">
import { computed, useTemplateRef } from 'vue'
import { useDynamicScroller, useTableColumnWidths } from 'vue-virtual-scroller'

const scrollerEl = useTemplateRef<HTMLElement>('scrollerEl')
const tableEl = useTemplateRef<HTMLTableElement>('tableEl')

const dynamicScroller = useDynamicScroller(computed(() => ({
  items: rows.value,
  keyField: 'id',
  direction: 'vertical' as const,
  minItemSize: 48,
  el: scrollerEl.value,
  flowMode: true,
})))

const { pool, vDynamicScrollerItem } = dynamicScroller

const { columnWidths, tableStyle } = useTableColumnWidths({
  table: tableEl,
  dependencies: computed(() => [rows.value.length, filter.value]),
})
</script>

<template>
  <div ref="scrollerEl">
    <table ref="tableEl" :style="tableStyle">
      <colgroup v-if="columnWidths.length > 0">
        <col
          v-for="(width, index) in columnWidths"
          :key="index"
          :style="{ width: `${width}px` }"
        >
      </colgroup>

      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="view in pool"
          :key="view.id"
          v-dynamic-scroller-item="{ view }"
        >
          <td>{{ view.item.id }}</td>
          <td>{{ view.item.name }}</td>
          <td>{{ view.item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

--------------------------------

### WindowScroller Component Setup

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/demos/window-scroller.md

Sets up the WindowScroller component with dynamic items and variable heights. Use this when the entire browser window should be the scrollable area.

```vue
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import { WindowScroller } from 'vue-virtual-scroller'

const scroller = useTemplateRef<InstanceType<typeof WindowScroller>>('scroller')
const rows = ref([
  { id: 1, user: 'Avery Anderson', message: 'Window-driven row', timestamp: '08:00', height: 88 },
  { id: 2, user: 'Jordan Diaz', message: 'Another variable-size row', timestamp: '08:01', height: 116 },
])

function jumpToSecondRow() {
  scroller.value?.scrollToItem(1, { align: 'start' })
}
</script>

<template>
  <WindowScroller
    ref="scroller"
    :items="rows"
    :item-size="null"
    key-field="id"
    size-field="height"
  >
    <template #before>
      <section>Content that stays above the virtual list.</section>
    </template>

    <template #default="{ item }">
      <article :style="{ height: `${item.height}px` }">
        <strong>{{ item.user }}</strong>
        <div>{{ item.message }}</div>
      </article>
    </template>

    <template #after>
      <footer>Content after the virtual list.</footer>
    </template>
  </WindowScroller>
</template>
```

--------------------------------

### Fixed-Size Rows Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/recycle-scroller.md

Demonstrates how to use RecycleScroller for a list with fixed-size rows. Ensure the scroller and item elements are sized correctly with CSS.

```vue
<RecycleScroller
  v-slot="{ item }"
  :items="rows"
  :item-size="40"
  key-field="id"
>
  <div class="row">
    {{ item.label }}
  </div>
</RecycleScroller>
```

--------------------------------

### Vue UseWindowScroller Composable Setup

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/use-window-scroller.md

Configure the `useWindowScroller` composable with essential options like `items`, `el`, `keyField`, and `itemSize`. Adjust `buffer`, `prerender`, and other parameters as needed for performance and behavior.

```typescript
const state = useWindowScroller({
  items: rows,
  el: rootEl,
  keyField: 'id',
  itemSize: 48,
  minItemSize: null,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
})
```

--------------------------------

### Resolver-Based Item Size Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/recycle-scroller.md

Shows how to configure RecycleScroller when item sizes are determined dynamically by a resolver function based on the item and its index. This is useful for variable row heights.

```vue
<RecycleScroller
  :items="rows"
  :item-size="(item, index) => item.compact ? 40 : 56"
  key-field="id"
>
  <template #default="{ item }">
    {{ item.label }}
  </template>
</RecycleScroller>
```

--------------------------------

### RecycleScroller Before Migration

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/migrate-v2-to-v3.md

Example of RecycleScroller usage before migrating to v3. Note the manual handling of view positioning via transform.

```vue
<script setup lang="ts">
const scrollerEl = useTemplateRef('scrollerEl')

const {
  pool,
  totalSize,
  handleScroll,
} = useRecycleScroller(options, scrollerEl)
</script>

<template>
  <div ref="scrollerEl" class="scroller" @scroll.passive="handleScroll">
    <div :style="{ minHeight: `${totalSize}px`, position: 'relative' }">
      <article
        v-for="view in pool"
        :key="view.nr.id"
        :style="{
          transform: `translateY(${view.position}px)`,
          visibility: view.nr.used ? 'visible' : 'hidden',
          pointerEvents: view.nr.used ? undefined : 'none',
        }"
      />
    </div>
  </div>
</template>
```

--------------------------------

### Update useDynamicScroller template bindings (v2)

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/migrate-v2-to-v3.md

Before migrating, ensure your `useDynamicScroller` template uses the correct item access paths. This example shows the v2 structure.

```vue
<script setup lang="ts">
const scrollerEl = useTemplateRef('scrollerEl')

const {
  pool,
  totalSize,
  handleScroll,
  vDynamicScrollerItem,
} = useDynamicScroller(options)
</script>

<template>
  <div ref="scrollerEl" class="scroller" @scroll.passive="handleScroll">
    <div :style="{ minHeight: `${totalSize}px`, position: 'relative' }">
      <article
        v-for="view in pool"
        :key="view.nr.id"
        v-dynamic-scroller-item="{ view }"
      >
        <h4>{{ view.item.item.title }}</h4>
        <p>{{ view.item.item.body }}</p>
      </article>
    </div>
  </div>
</template>
```

--------------------------------

### Basic RecycleScroller Usage

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/recycle-scroller.md

Demonstrates the basic setup for RecycleScroller using a scoped slot to render list items. Ensure the scroller and item elements have defined sizes via CSS.

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

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

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

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

--------------------------------

### Flow Mode Example

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/recycle-scroller.md

Demonstrates using RecycleScroller in `flowMode` for vertical single-axis native-flow rendering. This mode keeps active pooled views in DOM order and inserts spacer elements.

```vue
<RecycleScroller
  v-slot="{ item }"
  :items="rows"
  :item-size="40"
  :flow-mode="true"
  key-field="id"
>
  <article class="row">
    {{ item.label }}
  </article>
</RecycleScroller>
```

--------------------------------

### Vue Component with useTableColumnWidths

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-table-column-widths.md

This example demonstrates integrating `useTableColumnWidths` into a Vue component that also uses `useDynamicScroller`. It sets up a virtualized table with stable column widths based on measured content. Ensure `rows` and `filter` are reactive and that `scrollerEl` and `tableEl` are correctly referenced.

```vue
<script setup lang="ts">
import { computed, useTemplateRef } from 'vue'
import { useDynamicScroller, useTableColumnWidths } from 'vue-virtual-scroller'

const scrollerEl = useTemplateRef<HTMLElement>('scrollerEl')
const tableEl = useTemplateRef<HTMLTableElement>('tableEl')

const dynamicScroller = useDynamicScroller(computed(() => ({
  items: rows.value,
  keyField: 'id',
  direction: 'vertical' as const,
  minItemSize: 48,
  el: scrollerEl.value,
  flowMode: true,
})))

const { pool, vDynamicScrollerItem } = dynamicScroller

const {
  columnWidths,
  tableStyle,
} = useTableColumnWidths({
  table: tableEl,
  dependencies: computed(() => [rows.value.length, filter.value]),
})
</script>

<template>
  <div ref="scrollerEl">
    <table
      ref="tableEl"
      :style="tableStyle"
    >
      <colgroup v-if="columnWidths.length > 0">
        <col
          v-for="(width, index) in columnWidths"
          :key="index"
          :style="{ width: `${width}px` }"
        >
      </colgroup>

      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="view in pool"
          :key="view.id"
          v-dynamic-scroller-item="{ view }"
        >
          <td>{{ view.item.id }}</td>
          <td>{{ view.item.name }}</td>
          <td>{{ view.item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```

--------------------------------

### RecycleScroller Component Usage

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/recycle-scroller.md

Basic example of using the RecycleScroller component. It demonstrates how to bind items, set item size, and use slots for 'before' content and item rendering.

```html
<main>
  <slot name="before"></slot>
  <wrapper>
    <!-- Reused view pools here -->
    <slot name="empty"></slot>
  </wrapper>
  <slot name="after"></slot>
</main>
```

```vue
<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="32"
>
  <template #before>
    Hey! I'm a message displayed before the items!
  </template>

  <template v-slot="{ item }">
    <div class="user">
      {{ item.name }}
    </div>
  </template>
</RecycleScroller>
```

--------------------------------

### Headless Table with Dynamic Scroller and Column Widths

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/demos/headless-table.md

This component integrates `useDynamicScroller` for efficient rendering of large datasets in a table format and `useTableColumnWidths` to maintain consistent column widths. It requires setup for scroller and table elements, and defines options for dynamic scrolling.

```vue
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { useDynamicScroller, useTableColumnWidths } from 'vue-virtual-scroller'
import HeadlessTableRow from '../.vitepress/components/demos/HeadlessTableRow.vue'

const MIN_ROW_HEIGHT = 62

const buffer = ref(280)
const scrollerEl = ref<HTMLElement>()
const tableEl = ref<HTMLTableElement>()
const rows = ref([])

const dynamicScrollerOptions = reactive({
  get items() {
    return rows.value
  },
  keyField: (item: { id: number }) => item.id,
  direction: 'vertical' as const,
  minItemSize: MIN_ROW_HEIGHT,
  get el() {
    return scrollerEl.value
  },
  get buffer() {
    return buffer.value
  },
  flowMode: true,
})

const {
  pool,
  startSpacerSize,
  endSpacerSize,
  vDynamicScrollerItem,
} = useDynamicScroller(dynamicScrollerOptions)

const { columnWidths, tableStyle } = useTableColumnWidths({
  table: tableEl,
  dependencies: computed(() => [rows.value.length, buffer.value]),
})
</script>

<template>
  <div
    ref="scrollerEl"
    class="demo-viewport demo-table-viewport"
  >
    <table
      ref="tableEl"
      class="demo-headless-table"
      :style="tableStyle"
    >
      <colgroup v-if="columnWidths.length > 0">
        <col
          v-for="(width, index) in columnWidths"
          :key="index"
          :style="{ width: `${width}px` }"
        >
      </colgroup>

      <thead class="demo-headless-table__head">
        <tr class="demo-headless-table__row demo-headless-table__row--head">
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Region</th>
          <th>Status</th>
        </tr>
      </thead>

      <tbody class="demo-headless-table__body">
        <!-- Spacer row before the active pooled rows -->
        <tr
          v-if="startSpacerSize > 0"
          aria-hidden="true"
          class="demo-headless-table__spacer"
          :style="{ height: `${startSpacerSize}px` }"
        />

        <HeadlessTableRow
          v-for="view in pool"
          :key="view.id"
          v-dynamic-scroller-item="{ view }"
          :row="view.item"
        />

        <!-- Spacer row after the active pooled rows -->
        <tr
          v-if="endSpacerSize > 0"
          aria-hidden="true"
          class="demo-headless-table__spacer"
          :style="{ height: `${endSpacerSize}px` }"
        />
      </tbody>
    </table>
  </div>
</template>

```

--------------------------------

### Build Project for Production

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/demo/README.md

Builds the project for production with minification using yarn.

```bash
# build for production with minification
yarn run build
```

--------------------------------

### RecycleScroller After Migration

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/migrate-v2-to-v3.md

Example of RecycleScroller usage after migrating to v3. The `getViewStyle` function is now used for positioning pooled views.

```vue
<script setup lang="ts">
const scrollerEl = useTemplateRef('scrollerEl')

const {
  pool,
  totalSize,
  getViewStyle,
} = useRecycleScroller(options, scrollerEl)
</script>

<template>
  <div ref="scrollerEl" class="scroller">
    <div :style="{ minHeight: `${totalSize}px`, position: 'relative' }">
      <article
        v-for="view in pool"
        :key="view.nr.id"
        :style="getViewStyle(view)"
      />
    </div>
  </div>
</template>
```

--------------------------------

### Validate Generated Skill Files

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/SKILLS-GENERATION.md

Use these commands to validate the generated skill files. The first command prints the first 260 lines of the main skill file, and the second does the same for the references index. The third command lists all reference files.

```bash
sed -n '1,260p' packages/vue-virtual-scroller/skills/vue-virtual-scroller/SKILL.md
sed -n '1,260p' packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/index.md
rg --files packages/vue-virtual-scroller/skills/vue-virtual-scroller/references
```

--------------------------------

### TypeScript Generics with useWindowScroller

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-window-scroller.md

Demonstrates how to use `useWindowScroller` with TypeScript generics for item-aware pool and helper methods. It shows the initialization with various options and accessing an item's property from the pool.

```typescript
const windowScroller = useWindowScroller<Row>({
  items: rows.value,
  keyField: 'id',
  direction: 'vertical',
  itemSize: 44,
  minItemSize: null,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
}, rootEl)

windowScroller.pool.value[0]?.item.label
```

--------------------------------

### Server-Side Rendering with Prerender Prop

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/recycle-scroller.md

Configure server-side rendering by setting the `prerender` prop to the number of items that should be rendered on the server within the virtual scroller. This improves initial load performance.

```html
<RecycleScroller
  :items="items"
  :item-size="42"
  :prerender="10"
>
```

--------------------------------

### Record Generation Metadata and Track Changes

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/SKILLS-GENERATION.md

After regenerating skill files, update the document with generation metadata. Use git diff commands to identify changes in docs or public exports, then map these to affected skill sections for incremental updates.

```bash
git diff <last_skill_sha>..HEAD -- docs packages/vue-virtual-scroller/src/index.ts packages/vue-virtual-scroller/src/types.ts packages/vue-virtual-scroller/README.md
git diff --name-only <last_skill_sha>..HEAD -- docs packages/vue-virtual-scroller/src/index.ts packages/vue-virtual-scroller/src/types.ts packages/vue-virtual-scroller/README.md
```

--------------------------------

### Page Mode with Outer Scrollable Div

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/recycle-scroller.md

Use page mode when the scroller should virtualize against an outer scrollable container. This example shows a RecycleScroller within a div that has its own scrollbar.

```vue
<div style="height: 300px; overflow: auto">
  <RecycleScroller
    :items="list"
    :item-size="32"
    :page-mode="true"
  >
    <template #default="{ item }">
      <div class="row">{{ item.name }}</div>
    </template>
  </RecycleScroller>
</div>
```

--------------------------------

### Flow-Mode Spacers for Semantic Tables

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/use-dynamic-scroller.md

This pattern is used with `flowMode` to render semantic tables, ensuring correct spacing with start and end spacers. It requires `startSpacerSize` and `endSpacerSize` to be available.

```vue
<tbody>
  <tr v-if="startSpacerSize > 0" aria-hidden="true">
    <td :style="{ height: `${startSpacerSize}px` }" />
  </tr>
  <tr
    v-for="view in pool"
    :key="view.id"
    v-dynamic-scroller-item="{ view }"
  >
    <td>{{ view.item.label }}</td>
  </tr>
  <tr v-if="endSpacerSize > 0" aria-hidden="true">
    <td :style="{ height: `${endSpacerSize}px` }" />
  </tr>
</tbody>
```

--------------------------------

### Use Custom Tag for Item

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/dynamic-scroller-item.md

This example demonstrates how to use a custom HTML tag (e.g., 'article') for the DynamicScrollerItem wrapper. Pass the desired tag name to the `tag` prop.

```vue
<DynamicScrollerItem
  :item="item"
  :active="active"
  tag="article"
>
  {{ item.title }}
</DynamicScrollerItem>
```

--------------------------------

### DynamicScroller for Append-Heavy Chat Feed

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/skills/vue-virtual-scroller/references/dynamic-scroller.md

Ideal for dynamic feeds where new items are frequently appended. This setup uses `DynamicScrollerItem` to render each message, with `min-item-size` set for initial estimation.

```vue
<DynamicScroller
  ref="scroller"
  :items="rows"
  :min-item-size="48"
>
  <template #default="{ item, active }">
    <DynamicScrollerItem
      :item="item"
      :active="active"
    >
      {{ item.text }}
    </DynamicScrollerItem>
  </template>
</DynamicScroller>
```

--------------------------------

### Update useWindowScroller item styling (v3)

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/migrate-v2-to-v3.md

In v3, `useWindowScroller` recommends using `getViewStyle(view)` for simplified and consistent pooled item styling. Manual style rebuilding is no longer needed.

```vue
<div
  v-for="view in pool"
  :key="view.nr.id"
  :style="getViewStyle(view)"
/>
```

--------------------------------

### Initialize useRecycleScroller with TypeScript Generics

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/use-recycle-scroller.md

Initialize useRecycleScroller with a specific item type for compile-time validation. Ensure the scroll container element has a fixed height and overflow style. Apply totalSize to an inner wrapper for virtual scrolling.

```typescript
const recycleScroller = useRecycleScroller<User>({
  items: users.value,
  keyField: 'id',
  direction: 'vertical',
  itemSize: null,
  minItemSize: 32,
  sizeField: 'size',
  typeField: 'type',
  buffer: 200,
  pageMode: false,
  prerender: 0,
  emitUpdate: false,
  updateInterval: 0,
}, scrollerEl)

recycleScroller.pool.value[0]?.item.name
```

--------------------------------

### TypeScript Generics with WindowScroller

Source: https://github.com/akryum/vue-virtual-scroller/blob/master/docs/guide/window-scroller.md

Shows how to use TypeScript generics with WindowScroller for type inference of the `item` slot prop. This example defines an explicit `Row` interface for better type safety.

```vue
<script setup lang="ts">
import { ref } from 'vue'

interface Row {
  id: number
  label: string
}

const rows = ref<Row[]>([])
</script>

<template>
  <WindowScroller :items="rows" :item-size="40">
    <template #default="{ item }">
      {{ item.label }}
    </template>
  </WindowScroller>
</template>
```