Vue Tip: Query Inner Elements in Third-Party Components

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:

1<template>
2  <ThirdPartyComponent ref="comp" />
3</template>
4
5<script setup lang="ts">
6const compRef: Ref<typeof ThirdPartyComponent | null> = ref(null)
7const input: HTMLInputElement | null = compRef.value?.$el.querySelector('input')
8</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.