·
0 min read
Vue Tip: Query Inner Elements in Third-Party Components
MH
Michael Hoffmann
@mokkapps
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>
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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :