Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.6 KiB

Raw Blame History

category
Sensors

useInfiniteScroll

Infinite scrolling of the element.

Usage

<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core';
import { ref, useTemplateRef } from 'vue';

const el = useTemplateRef('el');
const data = ref([1, 2, 3, 4, 5, 6]);

const { reset } = useInfiniteScroll(
  el,
  () => {
    // load more
    data.value.push(...moreData);
  },
  {
    distance: 10,
    canLoadMore: () => {
      // inidicate when there is no more content to load so onLoadMore stops triggering
      // if (noMoreContent) return false
      return true; // for demo purposes
    },
  },
);

function resetList() {
  data.value = [];
  reset();
}
</script>

<template>
  <div ref="el">
    <div v-for="item in data">
      {{ item }}
    </div>
  </div>
  <button @click="resetList()">Reset</button>
</template>

Direction

Different scroll directions require different CSS style settings:

Direction	Required CSS
`bottom` (default)	No special settings required
`top`	`display: flex;` `flex-direction: column-reverse;`
`left`	`display: flex;` `flex-direction: row-reverse;`
`right`	`display: flex;`

::: warning Make sure to indicate when there is no more content to load with canLoadMore, otherwise onLoadMore will trigger as long as there is space for more content. :::

Directive Usage

<script setup lang="ts">
import { vInfiniteScroll } from '@vueuse/components';
import { ref } from 'vue';

const data = ref([1, 2, 3, 4, 5, 6]);

function onLoadMore() {
  const length = data.value.length + 1;
  data.value.push(...Array.from({ length: 5 }, (_, i) => length + i));
}
function canLoadMore() {
  // inidicate when there is no more content to load so onLoadMore stops triggering
  // if (noMoreContent) return false
  return true; // for demo purposes
}
</script>

<template>
  <div v-infinite-scroll="onLoadMore">
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>

  <!-- with options -->
  <div v-infinite-scroll="[onLoadMore, { distance: 10, canLoadMore }]">
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>
</template>

Type Declarations

type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
export interface UseInfiniteScrollOptions<
  T extends InfiniteScrollElement = InfiniteScrollElement,
> extends UseScrollOptions {
  /**
   * The minimum distance between the bottom of the element and the bottom of the viewport
   *
   * @default 0
   */
  distance?: number;
  /**
   * The direction in which to listen the scroll.
   *
   * @default 'bottom'
   */
  direction?: 'top' | 'bottom' | 'left' | 'right';
  /**
   * The interval time between two load more (to avoid too many invokes).
   *
   * @default 100
   */
  interval?: number;
  /**
   * A function that determines whether more content can be loaded for a specific element.
   * Should return `true` if loading more content is allowed for the given element,
   * and `false` otherwise.
   */
  canLoadMore?: (el: T) => boolean;
}
/**
 * Reactive infinite scroll.
 *
 * @see https://vueuse.org/useInfiniteScroll
 */
export declare function useInfiniteScroll<T extends InfiniteScrollElement>(
  element: MaybeRefOrGetter<T>,
  onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>,
  options?: UseInfiniteScrollOptions<T>,
): {
  isLoading: ComputedRef<boolean>;
  reset(): void;
};

3.6 KiB Raw Blame History