·
0 min read
Sometimes, we have to deal with third-party Vue components where we cannot put a ref on inner HTML elements to access them in our Vue code.
In these cases we can access $el on a template ref on the third-party component:
<template>
<ThirdPartyComponent ref="comp" />
</template>
<script setup lang="ts">
const compRef: Ref<typeof ThirdPartyComponent | null> = ref(null)
const input: HTMLInputElement | null = compRef.value?.$el.querySelector('input')
</script>
Info
For consistency, you should use template refs for direct access to elements instead of relying on $el.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Check Version at Runtime
You can easily check the Vue version at runtime.
Vue Tip: Create Custom v-model Modifier
v-model has some built-in modifiers, but in some cases, you might need to add your custom modifier.