Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Query Inner Elements in Third-Party Components

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Apr 21, 2022
1 min read
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>

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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.