Registry / web-framework / vue-autofocus-directive

vue-autofocus-directive

library1.0.4jsnpmunverified

The `vue-autofocus-directive` package provides a straightforward custom directive for Vue.js applications, designed to automatically apply focus to elements upon page load or when components are rendered. Based directly on the Vue 2 custom directive tutorial, this package is explicitly compatible with Vue 2.x environments. Its current stable version is 1.0.4, with no recent updates, indicating a mature yet static codebase. The package's primary differentiator is its minimalist approach, offering a direct implementation of the autofocus pattern without introducing complex abstractions. While effective for existing Vue 2 projects, it lacks official support for Vue 3, necessitating alternative strategies or manual adaptation for newer Vue applications. Developers should be aware of browser-specific limitations, particularly regarding mobile Safari's handling of the autofocus attribute.

web-framework

npm install vue-autofocus-directive

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-AUTOFOCUS-DIRE

vue-autofocus-directive

web-frameworkjavascriptv1.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

autofocus

✓ import autofocus from 'vue-autofocus-directive';

✗ import { autofocus } from 'vue-autofocus-directive';

The directive is exported as a default module, not a named export. Ensure you import it without curly braces for ESM.

autofocus

✓ const autofocus = require('vue-autofocus-directive');

✗ const autofocus = require('vue-autofocus-directive').autofocus;

For CommonJS environments, `require()` directly returns the default export object, so no property access is needed.

This code sets up a minimal Vue 2 application, registers the `v-autofocus` directive globally, and demonstrates its usage on an input field, including conditional application.

import Vue from 'vue'; import autofocus from 'vue-autofocus-directive'; // Register the autofocus directive globally for all Vue components Vue.directive('autofocus', autofocus); // Create a basic Vue 2 application instance new Vue({ el: '#app', data() { return { email: '', dynamicAutofocus: true // Control autofocus conditionally }; }, template: ` <div id="app"> <form @submit.prevent="submitForm"> <h2>User Registration</h2> <label for="email-input">Email:</label> <input id="email-input" v-autofocus="dynamicAutofocus"  v-model="email" type="email" name="email" placeholder="Enter your email" /> <br> <label for="password-input">Password:</label> <input id="password-input" type="password" name="password" placeholder="Enter a secure password" /> <br> <button type="button" @click="dynamicAutofocus = !dynamicAutofocus"> Toggle Autofocus (Currently: {{ dynamicAutofocus ? 'On' : 'Off' }}) </button> <button type="submit">Register</button> </form> <p>Email value: {{ email }}</p> </div> `, methods: { submitForm() { alert('Registration submitted for: ' + this.email); } } });

Debug

Known issues

breakingThis directive is designed for Vue 2.x and is not directly compatible with Vue 3.x. The Vue 3 Composition API and global API changes require a different approach for custom directives.

fix

For Vue 3, consider using a custom directive registered via `app.directive('autofocus', { mounted(el) { el.focus(); } })` or a ref with `el.value.focus()` in `onMounted`.

affects: >=1.0.0

gotchaThe native `autofocus` attribute and custom autofocus directives often do not work on mobile Safari due to Apple's policy on user interaction being required to trigger focus.

fix

Provide clear labels and consider alternative UI patterns or a prompt for users to manually focus elements on mobile devices.

affects: >=1.0.0

gotchaWhen using the directive with a dynamic value (e.g., `v-autofocus="someCondition"`), ensure `someCondition` is a reactive property. The directive's `update` hook is triggered on binding changes, but without a bound value, it behaves as a simple `v-autofocus` (always active).

fix

Always bind a reactive boolean value (e.g., `v-autofocus="shouldFocus"`) when conditional autofocus is desired, and update `shouldFocus` in your component's data or methods.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'directive')

Vue.js is either not loaded, or the wrong version (e.g., Vue 3) is being used when trying to register the directive, or it's not imported correctly.

fix

Ensure `import Vue from 'vue';` is present and that you are using Vue 2.x in your project. Verify Vue is globally available or imported correctly before `Vue.directive` is called.

Input field does not autofocus on page load in iOS Safari.

Mobile Safari intentionally prevents programmatic autofocus on input fields to improve user experience and prevent unexpected keyboard pop-ups, requiring a user interaction to trigger focus.

fix

This is a browser limitation, not a bug in the directive. Consider providing a clear visual cue for the user to tap the input, or rethink the UI flow to not rely on automatic focus on mobile devices.

Upgrade

Version history

1.0.4latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for the Vue 2.x framework where the directive is registered and used.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/byteboomers/vue-autofocus-directive ↗

packagehttps://www.npmjs.com/package/vue-autofocus-directive ↗