Skip to main content
You are viewing Pre-Alpha documentation.
Vuetify0 Logo
Theme
Mode
Accessibility
Vuetify

Sign in

Sign in with your preferred provider to access your account.

createVirtual API

API reference for the createVirtual composable.

Functions

createVirtual

(items: Ref<readonly T[], readonly T[]>, _options?: VirtualOptions) => VirtualContext<T>

Virtual scrolling composable for efficiently rendering large lists

createVirtualContext

(items: Ref<readonly T[], readonly T[]>, _options?: VirtualContextOptions) => ContextTrinity<VirtualContext<T>>

Creates a virtual scrolling context with dependency injection support.

useVirtual

(namespace?: string) => VirtualContext<T>

Returns the current virtual context from dependency injection.

Options

itemHeight

string | number

The height of the item.

height

string | number

The height of the container.

overscan

number

The number of extra items to render.

direction

VirtualDirection

The direction of the scrolling.

anchor

VirtualAnchor

The anchor of the scrolling.

anchorSmooth

boolean

Whether to smooth the anchor position.

onStartReached

(distance: number) => void | Promise<void>

The callback to call when the start is reached.

onEndReached

(distance: number) => void | Promise<void>

The callback to call when the end is reached.

startThreshold

number

The threshold for the start.

endThreshold

number

The threshold for the end.

momentum

boolean

Whether to enable momentum scrolling.

elastic

boolean

Whether to enable elastic scrolling.

Properties

element

Ref<HTMLElement, HTMLElement>

The element that is being virtualized.

items

ComputedRef<VirtualItem<T>[]>

The items that are being virtualized.

offset

Readonly<ShallowRef<number>>

The offset of the virtualized items.

size

Readonly<ShallowRef<number>>

The size of the virtualized items.

state

ShallowRef<VirtualState>

The state of the virtualized items.

Methods

scrollTo

(index: number, options?: ScrollToOptions) => void

Scroll to an item by index.

scroll

() => void

The scroll event handler.

scrollend

() => void

The scrollend event handler.

resize

(index: number, height: number) => void

Resize an item by index.

reset

() => void

Reset the virtualized items.

Was this page helpful?

© 2016-1970 Vuetify, LLC
Ctrl+/