CODEWITHSUNDEEP
typescriptvuejs3
Ethan Franson
Ethan Franson

Reputation: 165

How to use Vue Custom Directives with Typescript

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.

enter image description here

Upvotes: 0

Views: 740

Answers (1)

Mises
Mises

Reputation: 4603

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>

Upvotes: 1

Related Questions