1---
2category: Component
3---
4 
5# unrefElement
6 
7Retrieves the underlying DOM element from a Vue ref or component instance
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { unrefElement } from '@vueuse/core'
14import { onMounted, useTemplateRef } from 'vue'
15 
16const div = useTemplateRef('div') // will be bound to the <div> element
17const hello = useTemplateRef('hello') // will be bound to the HelloWorld Component
18 
19onMounted(() => {
20  console.log(unrefElement(div)) // the <div> element
21  console.log(unrefElement(hello)) // the root element of the HelloWorld Component
22})
23</script>
24 
25<template>
26  <div ref="div" />
27  <HelloWorld ref="hello" />
28</template>
29```
30 
31## Type Declarations
32 
33```ts
34export type VueInstance = ComponentPublicInstance
35export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
36export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
37  MaybeRefOrGetter<T>
38export type MaybeElement =
39  | HTMLElement
40  | SVGElement
41  | VueInstance
42  | undefined
43  | null
44export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
45  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
46/**
47 * Get the dom element of a ref of element or Vue component instance
48 *
49 * @param elRef
50 */
51export declare function unrefElement<T extends MaybeElement>(
52  elRef: MaybeComputedElementRef<T>,
53): UnRefElementReturn<T>
54```
55