Files
stack/packages/mosaic/framework/skills/vueuse-functions/references/unrefElement.md
T
fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
2026-08-19 14:37:17 -05:00

1.4 KiB

category
category
Component

unrefElement

Retrieves the underlying DOM element from a Vue ref or component instance

Usage

<script setup lang="ts">
import { unrefElement } from '@vueuse/core';
import { onMounted, useTemplateRef } from 'vue';

const div = useTemplateRef('div'); // will be bound to the <div> element
const hello = useTemplateRef('hello'); // will be bound 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>

Type Declarations

export type VueInstance = ComponentPublicInstance;
export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
export 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: MaybeComputedElementRef<T>,
): UnRefElementReturn<T>;