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.

Copy Markdown

Intermediate93.8% coverageMar 23, 2026

Usage

import { toElement } from '@vuetify/v0'
import { useTemplateRef } from 'vue'

const el = useTemplateRef<HTMLDivElement>('target')

const element = toElement(el) // HTMLDivElement | undefined

Architecture

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:

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.

API Reference

The following API details are for the toElement composable.

Functions

toElement

(target: MaybeElementRef) => Element | undefined

Resolves a {@link MaybeElementRef} to a DOM Element or undefined. Handles: - `Ref<Element>`, `ShallowRef<HTMLElement>`, getter functions - Vue component instances (extracts `$el`) - Raw DOM elements (pass-through) - null/undefined (returns undefined)