·
0 min read

Vue Tip: Query Inner Elements in Third-Party Components

Vue Tip: Query Inner Elements in Third-Party Components Image

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:

I will never share any of your personal data. You can unsubscribe at any time.