❯
fn

useCurrentElement

v0.0.14testeddemo

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

ts
// Inferred element type from the component's root node
const el = useCurrentElement();
watchEffect(() => console.log(el.value));
ts
// Explicit element type
const el = useCurrentElement<HTMLDivElement>();
ts
// Track an explicit child component / element ref instead of `$el`
const child = useTemplateRef('child');
const el = useCurrentElement(child);

Demo

Loading demo…

Signature

ts
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

ParameterTypeDescription
rootComponent?MaybeComputedElementRef<R>Optional ref/getter for an explicit root component or element; defaults to the current instance's $el

Returns

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