/vueuse-components-skilld

Component catalog

Every public component export of @vueuse/components 15.0.0. Citations are paths inside the package (dist/index.d.ts, dist/index.js).

Two shapes:

• Pure renderless: renders only the default slot; scoped slot receives the reactive composable return. No wrapper element, no as prop.
• Element wrapper: renders props.as || "div", uses it as the composable target, passes the scoped slot data. Supports as.

Unless noted, slot data equals the reactive(...) return of the matching @vueuse/core composable.

On* event components

OnClickOutside

Element wrapper (dist/index.js:5-17).

• Props: as, options (Omit<OnClickOutsideOptions, 'controls'>, dist/index.d.ts:5-7)
• Emits: trigger (DOM Event)
• Slot: default children of the rendered element; the element is the outside-click target
• options supports ignore (refs or CSS selectors) and detectIframe via the core onClickOutside options (dist/index.js:7-9; https://vueuse.org/onClickOutside/)

OnLongPress

Element wrapper (dist/index.js:57-69).

• Props: as, options (OnLongPressOptions)
• Emits: trigger (PointerEvent)
• Slot: scoped, receives the full onLongPress return (UseOnLongPressReturn, dist/index.d.ts:32-34)
• v15 clears a pending long press on pointercancel (https://github.com/vueuse/vueuse/releases/tag/v15.0.0)

Element wrapper components

UseImage

Element wrapper that renders props.as || "img" with all props as attributes when no default slot (dist/index.js:763-790).

• Props: the full UseImageOptions set (src, srcset, sizes, alt, class, crossorigin, loading, width, height, ...) plus as
• Slots: #loading and #error (receives the error value) take precedence while loading or failed; default slot receives useImage return (isLoading, error, ...)

UseVirtualList

Renders its own container and wrapper divs, not an as element (dist/index.js:1190-1206).

• Props: list (required), options (required, UseVirtualListOptions such as itemHeight/itemWidth/overscan), height (string, default "300px")
• Slot: default, scoped per item: { index, data, height }... receives the item ({ index, data } per row; keep row height synced with options.itemHeight, https://vueuse.org/useVirtualList/)
• Exposes scrollTo(index) via ref
• No default slot renders the literal text "Please set content!" (dist/index.js:1198)

Pure renderless components

Notes:

• UseNow, UseTimeAgo, UseTimestamp expose only scheduler for timing; the deprecated timer options were removed from core in v15 (https://github.com/vueuse/vueuse/releases/tag/v15.0.0).
• Boolean-returning single-value components wrap their value under a named key (visibility, isOnline, isLeft, focused, ...) instead of passing the raw ref.