Posts Learn Components Snippets Categories Tags Tools About
/

Vue Js Auto Focus Directive

Learn how to define a custom directive in Vue Js to auto focusinput

Created on Sep 11, 2021

301 views

Vue Js allow you to define a custom directive that can be used to make code reusable in components. To automatically set focus on input in Vue Js you can define the following custom directive. How this work is that the element will autofocus using the native Java Script "focus()" method behind the scene.
<template>
  <input
    v-auto-focus
    type="email"
    placeholder="Your full name"
  >
</template>

<script>
Vue.directive('auto-focus', {
  inserted: el => el.focus()
})
</script>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Vue Js Auto Focus Directive

)