How to use Vue Custom Directives with Typescript

July 27, 2022

I am trying to understand how to convert the example below using typescript and the Composition API, with the setup script. This example it from the vue documentation. I don’t know what type to give the "el" parameter to get this to work.

>Solution :

In Vue 3, components are no longer limited to only 1 root element. Implicitly, this means you no longer have an this.$el. You can create one by adding ref="" to DOM element you want to target.

<script setup lang="ts">
// enables v-focus in templates
const root = ref(null)

onMounted(() => {
    // here you got root $el
    root.value.focus()
})

// Using Option API. I didn't check are it works.
this.$refs.$el
</script>

<template>
  <input ref="root" />
</template>

In composition API it will be like that:

<script setup lang="ts">
// enables v-focus in templates
const vFocus = {
  mounted: (el: any) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>