1---
2category: Component
3---
4 
5# useCurrentElement
6 
7Get the DOM element of current component as a ref.
8 
9## Usage
10 
11```ts
12import { useCurrentElement } from '@vueuse/core'
13 
14const el = useCurrentElement() // ComputedRef<Element>
15```
16 
17Or pass a specific vue component
18 
19```vue
20<script setup lang="ts">
21import { useCurrentElement, VueInstance } from '@vueuse/core'
22import { shallowRef } from 'vue'
23 
24const componentRef = shallowRef<VueInstance>(null as unknown as VueInstance)
25 
26const el = useCurrentElement(componentRef) // ComputedRef<Element>
27</script>
28 
29<template>
30  <div>
31    <OtherVueComponent ref="componentRef" />
32    <p>Hello world</p>
33  </div>
34</template>
35```
36 
37## Caveats
38 
39This functions uses [`$el` under the hood](https://vuejs.org/api/component-instance.html#el).
40 
41Value of the ref will be `undefined` until the component is mounted.
42 
43- For components with a single root element, it will point to that element.
44- For components with text root, it will point to the text node.
45- For components with multiple root nodes, it will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM.
46 
47It's recommend to only use this function for components with **a single root element**.
48 
49## Type Declarations
50 
51```ts
52export declare function useCurrentElement<
53  T extends MaybeElement = MaybeElement,
54  R extends VueInstance = VueInstance,
55  E extends MaybeElement = MaybeElement extends T
56    ? IsAny<R["$el"]> extends false
57      ? R["$el"]
58      : T
59    : T,
60>(rootComponent?: MaybeElementRef<R>): ComputedRefWithControl<E>
61```
62