vue-input-otp is an accessible and unstyled Vue 3 component designed for capturing one-time passcodes (OTPs). It provides a flexible slot-based API, allowing developers complete control over the visual presentation of each digit input, rather than enforcing a specific UI. The library works by rendering an invisible native input that handles the underlying logic, while exposing slots for custom rendering. The current stable version is 0.3.2, with minor and patch releases occurring as needed. Its key differentiator is its 'bring-your-own-style' approach, offering maximum customization and robust accessibility features, including password manager support and precise control over virtual keyboard behavior on mobile devices. It aims to solve the lack of a native HTML OTP input by providing a robust, extensible solution for Vue applications.
npm install vue-input-otpVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to integrate `OTPInput` into a Vue 3 application, using `v-model` for two-way data binding and leveraging the slot props to render custom input fields, including a 'fake dash' separator, and local state management with `ref`.
Update event handlers to directly receive the value, e.g., `@input="handleInput"` where `handleInput(value)` is your new function signature.
Implement custom validation logic using props or internal methods if a specific input pattern (e.g., only numbers) is required for your OTP fields.
Utilize the provided slot props (e.g., `char`, `isActive`) to apply custom CSS classes and styles to each digit slot. Refer to the 'Default example' in the documentation for styling guidance, often using CSS frameworks like Tailwind CSS.
Set `pushPasswordManagerStrategy` to a suitable value (e.g., 'unshift' or 'shift') if you observe issues with password manager overlays. Consult the API reference for available strategies and their effects.
Ensure you are passing a default slot to `OTPInput` that iterates over `slots` provided by the component's scope, as shown in the usage examples. E.g., `<OTPInput v-slot="{ slots }">...</OTPInput>`.When defining your custom slot component, import `SlotProps` from `vue-input-otp` and use it to type your component's props. For example: `import type { SlotProps } from 'vue-input-otp'; defineProps<SlotProps>();`.