Infinite Scroll

Automatically loads more data when scrolling near the end of the container. It supports SSR-friendly usage, custom status slots, and manual retry handling.

Basic Usage

Use v-model:loading to drive the loading state and finished to stop further loads.

Item 1

Item 2

Item 3

Item 4

Item 5

Basic Usage

Custom Tip Text

If you want to override the locale text for a single instance, pass loading-text, finished-text, or error-text.

Item 1

Item 2

Item 3

Custom Tip Text

Error State

When a request fails, bind v-model:error and let the built-in retry area or your custom error slot trigger another load.

Item 1

Item 2

Item 3

Error State

Custom Slots

Use the loading, finished, and error slots to fully control status rendering while preserving the component's load logic.

Item 1

Item 2

Custom Slots

Use in Nuxt

YhInfiniteScroll can be used directly in Nuxt. In SSR it renders stable markup first, then starts IntersectionObserver or scroll listeners on the client after mount.

Nuxt SSR Support

Real-world Scenario: E-commerce Product List

The component also works well with card grids and longer async chains, as long as the container keeps a clear scroll boundary.

E-commerce Product List Scenario

API

Props

Prop	Description	Type	Default
loading	Current loading state. Supports v-model:loading.	boolean	false
finished	Whether all data has been loaded	boolean	false
error	Whether the current load has failed. Supports v-model:error.	boolean	false
threshold	Distance threshold in pixels before the end is reached	number	100
direction	Scroll direction	'vertical' | 'horizontal'	'vertical'
loading-text	Per-instance loading text. Falls back to locale text when empty.	string	''
finished-text	Per-instance finished text. Falls back to locale text when empty.	string	''
error-text	Per-instance error text. Falls back to locale text when empty.	string	''
immediate-check	Whether to run an initial load check after mount	boolean	true
disabled	Disables automatic loading	boolean	false
target	Selector of the external scroll container	string	''
use-observer	Whether to use IntersectionObserver	boolean	true
root-margin	IntersectionObserver root margin	string	'0px'
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Events

Event	Description	Parameters
load	Triggered when the component needs the next page of data	()
update:loading	Emits the new loading state	(value: boolean)
update:error	Emits the new error state	(value: boolean)

Slots

Slot	Description	Parameters
default	Main scroll content	-
loading	Custom content shown while loading	-
finished	Custom content shown after all data is loaded	-
error	Custom content shown when loading fails	-

Expose

Name	Description	Type
check	Manually checks whether another load should be triggered	() => void
retry	Clears the error state and triggers another load	() => void

Theme Variables

YhInfiniteScroll supports themeOverrides, while its default appearance mainly consumes shared global tokens instead of a large component-specific CSS variable table.

Token	Description	Default
--yh-text-color-secondary	Loading text color	#86868b
--yh-text-color-placeholder	Finished text color	#c0c4cc
--yh-color-danger	Error text color	#f56c6c

Type Exports

Name	Description
YhInfiniteScrollProps	Component props type
YhInfiniteScrollEmits	Component emits type
YhInfiniteScrollSlots	Component slots type
YhInfiniteScrollExpose	Component expose type
YhInfiniteScrollInstance	Component instance type