Vue encourages reactive and declarative programming for maintainability. But sometimes direct DOM access is required. In those cases, the $el property gives you access to a component’s root HTML element after it has been mounted.

What is $el in Vue?

The $el property in Vue refers to the root DOM node of a component instance. It becomes available only after the component has been mounted.

mounted() {  console.log(this.$el) // Logs the root HTML element

}

When Should You Use $el?

Use $el when:

1. Integrating Third-Party Libraries

When using external JS libraries (like jQuery, D3, etc.) that need a direct DOM reference, $el can be practical.

mounted() {  const chart = new Chart(this.$el, chartOptions);

}

2. Accessing Element Properties

Sometimes, you might want to read DOM properties like scrollHeight or clientWidth:

mounted() {  console.log(this.$el.scrollHeight);

}

Why $el is discouraged in Vue 3

Vue 3 encourages the separation of concerns and reactivity. $el accesses a raw DOM element and bypasses Vue’s reactivity system, making your code harder to maintain and debug.

// Avoid this:this.$el.style.display = ‘none’

 

// Use Vue syntax:

<div v-show=”isVisible”>Hello</div>

Also Read: The Top Vue Developer Tools For Easy Coding

Alternatives to $el in Vue 3

Prefer Vue-native tools like refs and directives.

<template>  <input ref=”inputRef” />

</template>

 

<script setup>

import { ref, onMounted } from ‘vue’

 

const inputRef = ref(null)

 

onMounted(() => {

  inputRef.value.focus()

})

</script>

Best Practices for Using $el

Keep DOM access minimal and clean.

  • Use $el only in the mounted() hook 
  • Avoid data mutations based on DOM state 
  • Prefer ref for maintainability and reactivity

Key Takeaway

Use $el only when you need to interact directly with the DOM and Vue’s reactive system doesn’t suffice. For most tasks, refs and directives are better.

Related Resources