useCurrentElement

v0.0.15testeddemo

Reactive root DOM element of the current component instance. Resolves to `vm.$el` (or the unwrapped `rootComponent` ref when provided) and is re-read on `onMounted` and `onUpdated` via a controlled computed — so it stays correct across re-renders without an always-on watcher. Generic over the element type; the type is inferred from the component's `$el` when available. SSR-safe: returns `undefined` until the component is mounted on the client.

Source Tests

Examples

// Inferred element type from the component's root node
const el = useCurrentElement();
watchEffect(() => console.log(el.value));

// Explicit element type
const el = useCurrentElement<HTMLDivElement>();

// Track an explicit child component / element ref instead of `$el`
const child = useTemplateRef('child');
const el = useCurrentElement(child);

Demo

Loading demo…

Signature

export function useCurrentElement<
  T extends MaybeElement = MaybeElement,
  R extends VueInstance = VueInstance,
  E extends MaybeElement = MaybeElement extends T
    ? IsAny<R['$el']> extends false ? R['$el'] : T
    : T,
>(
  rootComponent?: MaybeComputedElementRef<R>,
): UseCurrentElementReturn<T, R, E>{ ... }

Type Parameters

Textends MaybeElement= MaybeElement

Rextends VueInstance= VueInstance

Eextends MaybeElement=

MaybeElement extends T
    ? IsAny<R['$el']> extends false ? R['$el'] : T
    : T

Parameters

Parameter	Type	Default	Description
`rootComponent`?	`any`	—	Optional ref/getter for an explicit root component or element; defaults to the current instance's `$el`

Returns

ComputedRefWithControl<E>A controlled computed ref of the resolved element, with `.trigger()` / `.peek()` / `.stop()`