Javascript is required
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:

2  <ThirdPartyComponent ref="comp" />
5<script setup lang="ts">
6const compRef: Ref<typeof ThirdPartyComponent | null> = ref(null)
7const input: HTMLInputElement | null = compRef.value?.$el.querySelector('input')


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.