Posts Learn Components Snippets Categories Tags About

Vue Js Auto Focus Directive

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

Created on Sep 11, 2021


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.
    placeholder="Your full name"

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

Snippets by

PostSrc poster


Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Vue Js Auto Focus Directive


PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets