N
Nuxt•4mo ago
mabuse9922

Get DOM-Element from Nuxt-UI elements

For example, i have <UInput ref='refInput'/> and wich type has refInput = ref<>(null)?
5 Replies
kapa.ai
kapa.ai•4mo ago
Hi @mabuse9922. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To access the DOM element of a Nuxt UI component like <UInput>, you should use the useTemplateRef composable (introduced in Vue 3.5) instead of the standard ref. This provides typed access to the component instance or its exposed properties. For <UInput>, the component does not explicitly document which properties are exposed via the template ref. However, for similar components like <UInputNumber>, the documentation states that accessing the component via a template ref gives you an object with an inputRef property, which is a Ref<HTMLInputElement | null>—this is the actual DOM input element UInputNumber Expose. Example: 
<script setup lang="ts">
const input = useTemplateRef('input')
</script>

<template>
  <UInput ref="input" />
</template>
<script setup lang="ts">
const input = useTemplateRef('input')
</script>

<template>
  <UInput ref="input" />
</template>
To get the DOM element, you would access input.value?.inputRef?.value. If you want to focus the input programmatically, for example: 
input.value?.inputRef?.value?.focus()
input.value?.inputRef?.value?.focus()
Type:
- input is a template ref to the component instance. - input.value?.inputRef is a Ref<HTMLInputElement | null> (for components that expose it).
Note: The documentation for <UInput> does not explicitly state which properties are exposed, but this pattern is consistent across Nuxt UI components that do expose their DOM refs UInputNumber Expose, With keyboard shortcut.
If you need to ensure access to the DOM element, check the component’s documentation for its exposed API or inspect the component’s source to see what is exposed via defineExpose. Summary:
Use useTemplateRef for the ref, and access the DOM element via the exposed inputRef property if available: 
input.value?.inputRef?.value // HTMLInputElement | null
input.value?.inputRef?.value // HTMLInputElement | null
If the component does not expose inputRef, you may not be able to access the DOM element directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
mabuse9922
mabuse9922OP•4mo ago
@kapa.ai ok, give me the useTemplateRef example with types!
kapa.ai
kapa.ai•4mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! Here is an example of using useTemplateRef with types, as shown in the Nuxt UI documentation for components like <UInput>. This pattern is also used for other Nuxt UI components: 
<script setup lang="ts">
const input = useTemplateRef('input')
</script>

<template>
  <UInput ref="input" />
</template>
<script setup lang="ts">
const input = useTemplateRef('input')
</script>

<template>
  <UInput ref="input" />
</template>
In this example, input is a template ref to the component instance. For components that expose an inputRef (such as <UInputNumber>), you can access the underlying DOM element like this: 
input.value?.inputRef?.value // HTMLInputElement | null
input.value?.inputRef?.value // HTMLInputElement | null
However, the documentation does not explicitly state the exposed type for <UInput>. For other components, such as <UForm>, <UAuthForm>, <UCarousel>, <UStepper>, and <UTable>, the documentation provides clear tables of the exposed properties and their types. You can find these examples in the official docs: - UForm Expose Example - UAuthForm Expose Example - UCarousel Expose Example - UStepper Expose Example - UTable Expose Example If you need to know the exact type for a specific component, please refer to its documentation or source code, as not all components expose the same properties or types. For <UInput>, the pattern above is correct, but the exact exposed type is not explicitly documented for this component With keyboard shortcut. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1097891465797050469> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?