Vue 3 Composition API - How to get the component element ($el) on which component is mounted
Solution 1
tl;dr:
In Vue 3, components are no longer limited at only 1 root element. Implicitly, this means you no longer have an $el
.
You have to use ref
to interact with any element in your template.
As pointed out by @AndrewSee in comments, when using a render function (not a template), you can specify the desired ref
in createElement
options:
render: function (createElement) {
return createElement('div', { ref: 'root' })
}
// or, in short form:
render: h => h('div', { ref: 'root' })
initial answer:
As outlined in docs,
[...] the concepts of reactive refs and template refs are unified in Vue 3.
And you also have an example on how to ref
a "root" element. Obviously, you don't need to name it root. Name it $el
, if you prefer. However, doing so doesn't mean it will be available as this.$el
, but as this.$refs.$el
.
<template>
<div ref="root"></div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(root.value) // this is your $el
})
return {
root
}
}
}
</script>
In Vue 3 you're no longer limited to only one root element in <template>
, so you have to specifically ref
erence any element you want to interact with.
Solution 2
In Vue 3 + Composition API there is no $el
alternative provided.
Even if you use Vue 3 with Options API, due to the availability of Fragments, it is recommended to use template refs for direct access to DOM nodes instead of relying on this.$el
.
How to initiate a third-part-library
Let's say we have a div element for the third-part-library:
<template>
Below we have a third-party-lib
<div class="third-party-lib"></div>
</template>
And then we want to initiate it from the Javascript:
Solution 1 (recommended): Using template refs
<script setup>
import { ref, onMounted } from 'vue';
const $thirdPartyLib = ref(null); // template ref
onMounted(() => {
$thirdPartyLib.value.innerText = 'Dynamically loaded';
});
</script>
<template>
Below we have a third-party-lib
<div ref="$thirdPartyLib" class="third-party-lib"></div>
</template>
Solution 2 (not recommended): Using non-documented
@VnodeMounted
<script setup>
function initLib({ el }) {
el.innerText = 'Dynamic content';
}
</script>
<template>
Below we have a third-party-lib
<div class="third-party-lib" @VnodeMounted="initLib"></div>
</template>
Damir Miladinov
Updated on February 06, 2022Comments
-
Damir Miladinov over 2 years
I want to use
onMounted
to initiate third-party library. To do that I need the component element as its context. In Vue 2 I would get it withthis.$el
but not sure how to do it with composition functions.setup
has two arguments and none of them contains the element.setup(props, context) { onMounted(() => { interact($el) .resizable(); }) }