toElement
Resolves various element reference types to a plain DOM Element. Accepts refs, getters, raw DOM elements, or Vue component instances and normalizes them to a single Element | undefined.
Usage
ts
import { toElement } from '@vuetify/v0'
import { useTemplateRef } from 'vue'
const el = useTemplateRef<HTMLDivElement>('target')
const element = toElement(el) // HTMLDivElement | undefinedArchitecture
toElement resolves multiple input shapes to a DOM element:
Reactivity
toElement is a pure transformer function. It does not track reactivity or return reactive values.
Tip
Use inside computed for reactivity Wrap in computed() if you need reactive element resolution:
ts
const resolved = computed(() => toElement(targetRef))Supported Input Types
| Input | Result |
|---|---|
Ref<HTMLElement> | Unwrapped element |
ShallowRef<Element> | Unwrapped element |
() => HTMLElement | Called, returns element |
HTMLElement / SVGElement | Pass-through |
ComponentPublicInstance | Extracts $el |
null / undefined | Returns undefined |
Tip
Structural typing Uses { readonly value: T } instead of Vue’s nominal Ref<T> to avoid type mismatches across Vue versions.
Examples
Source Type Resolver
Switch between input types (ref, getter, raw element, null) to see how toElement resolves each to a DOM element or undefined.
Target element (div#to-element-target)
toElement() result
InputuseTemplateRef('target')ResolvedundefinedTagundefinedIDnone
The following API details are for the toElement composable.
Was this page helpful?