Skip to content
On this page

unrefElement

Category
Last Changed
last month

Unref for dom element.

Usage

<template>
  <div ref="div"/>
  <HelloWorld ref="hello"/>
</template>

<script setup>
import { ref } from 'vue'
import { unrefElement } from '@vueuse/core'

const div = ref() // will be bind to the <div> element
const hello = ref() // will be bind to the HelloWorld Component

onMounted(() => {
  console.log(unrefElement(div)) // the <div> element
  console.log(unrefElement(hello)) // the root element of the HelloWorld Component
})
</script>
<template>
  <div ref="div"/>
  <HelloWorld ref="hello"/>
</template>

<script setup>
import { ref } from 'vue'
import { unrefElement } from '@vueuse/core'

const div = ref() // will be bind to the <div> element
const hello = ref() // will be bind to the HelloWorld Component

onMounted(() => {
  console.log(unrefElement(div)) // the <div> element
  console.log(unrefElement(hello)) // the root element of the HelloWorld Component
})
</script>

Type Declarations

export declare type VueInstance = ComponentPublicInstance
export declare type MaybeElementRef<T extends MaybeElement = MaybeElement> =
  MaybeRef<T>
export declare type MaybeElement =
  | HTMLElement
  | SVGElement
  | VueInstance
  | undefined
  | null
export declare type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
/**
 * Get the dom element of a ref of element or Vue component instance
 *
 * @param elRef
 */
export declare function unrefElement<T extends MaybeElement>(
  elRef: MaybeElementRef<T>
): UnRefElementReturn<T>
export declare type VueInstance = ComponentPublicInstance
export declare type MaybeElementRef<T extends MaybeElement = MaybeElement> =
  MaybeRef<T>
export declare type MaybeElement =
  | HTMLElement
  | SVGElement
  | VueInstance
  | undefined
  | null
export declare type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
/**
 * Get the dom element of a ref of element or Vue component instance
 *
 * @param elRef
 */
export declare function unrefElement<T extends MaybeElement>(
  elRef: MaybeElementRef<T>
): UnRefElementReturn<T>

Source

SourceDocs

Contributors

Anthony Fu
Julian Meinking
Jelf

Changelog

v8.7.4 on 6/18/2022
3d846 - fix: revert #1657
v8.7.0 on 6/16/2022
050da - fix: don't return the Vue instance when $el is null/undefined (#1657)
v8.1.0 on 3/16/2022
3e194 - fix: improve types (#1409)
v6.4.0 on 9/17/2021
9728a - fix(types): MaybeElementRef type, close #685
unrefElement has loaded