Implementing Custom Directives for DOM Access

Snippet

Implementing Custom Directives for DOM Access

Custom directives allow you to reuse low-level DOM logic across components. In <script setup>, any camelCase variable starting with 'v' is automatically recognized as a directive that can be used in the template.

snippet.js
javascript
const vFocus = {
  mounted: (el) => el.focus()
};

vue

Breakdown

const vFocus = {

Define a directive object following the naming convention 'v' + Name.

mounted: (el) => el.focus()

The lifecycle hook 'mounted' receives the target DOM element and calls the native focus method.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Implementing Custom Directives for DOM Access

Related