{"id":12630,"library":"vue3-otp-input","title":"Vue 3 OTP Input Component","description":"vue3-otp-input is a fully customizable, one-time password (OTP) input component designed for Vue 3 applications, leveraging the Vue Composition API. The current stable version is `0.5.40`, with a consistent release cadence addressing bug fixes and minor enhancements. Key differentiators include robust handling of mobile autofill, improved focus behavior, and specific fixes for iOS input issues, which were addressed in recent `0.5.x` releases. It is a lightweight component that ships with TypeScript types, providing a seamless integration experience for developers building modern Vue applications requiring secure and user-friendly OTP entry forms.","status":"active","version":"0.5.40","language":"javascript","source_language":"en","source_url":"https://github.com/ejirocodes/vue3-otp-input","tags":["javascript","vue 3 otp input","vue otp input","vue","vue 3","vue composition API","otp","input","otp input","typescript"],"install":[{"cmd":"npm install vue3-otp-input","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-otp-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-otp-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3.x reactivity and component rendering.","package":"vue","optional":false}],"imports":[{"note":"The primary component, OtpInput, is provided as a default export from the package. This is the main way to consume the component within Vue SFCs.","wrong":"import { OtpInput } from 'vue3-otp-input'; // Common mistake, it's a default export","symbol":"OtpInput","correct":"import OtpInput from 'vue3-otp-input';"},{"note":"For TypeScript users, type definitions for the component's props are available for better type safety and autocompletion.","symbol":"Props","correct":"import type { OtpInputProps } from 'vue3-otp-input';"},{"note":"While technically possible in some environments with transpilation, the package is primarily designed for ESM consumption in modern Vue 3 setups. Direct CommonJS `require` is not the idiomatic way to import and use this component.","wrong":"const OtpInput = require('vue3-otp-input');","symbol":"CommonJS require","correct":"N/A (ESM recommended)"}],"quickstart":{"code":"<template>\n  <div class=\"otp-container\">\n    <h2>Enter OTP</h2>\n    <OtpInput\n      ref=\"otpInputRef\"\n      v-model:value=\"otpValue\"\n      :numInputs=\"6\"\n      :shouldAutoFocus=\"true\"\n      :input-type=\"['number', 'text']\"\n      :input-classes=\"['otp-input']\"\n      separator=\"-\"\n      @on-change=\"handleOnChange\"\n      @on-complete=\"handleOnComplete\"\n    />\n    <p v-if=\"otpValue\">Current OTP: {{ otpValue }}</p>\n    <button @click=\"clearOtp\">Clear OTP</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport OtpInput from 'vue3-otp-input';\n\nconst otpValue = ref<string>('');\nconst otpInputRef = ref<InstanceType<typeof OtpInput> | null>(null);\n\nconst handleOnChange = (value: string) => {\n  console.log('OTP Changed:', value);\n};\n\nconst handleOnComplete = (value: string) => {\n  console.log('OTP Complete:', value);\n  alert(`OTP Completed: ${value}`);\n  // In a real application, you might submit the OTP here\n};\n\nconst clearOtp = () => {\n  otpValue.value = '';\n  otpInputRef.value?.clearInput(); // Using the clearInput method exposed by the component\n};\n</script>\n\n<style scoped>\n.otp-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n  max-width: 400px;\n  margin: 50px auto;\n}\n.otp-input {\n  width: 40px;\n  height: 40px;\n  padding: 5px;\n  margin: 0 5px;\n  text-align: center;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 1.2em;\n}\n.otp-input:focus {\n  border-color: #007bff;\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates a basic usage of the OtpInput component in a Vue 3 Single File Component (SFC). It includes `v-model` for two-way data binding, sets the number of inputs and auto-focus, defines input types and styling, and handles `on-change` and `on-complete` events. It also shows how to clear the OTP programmatically."},"warnings":[{"fix":"Review your project's `vite.config.ts` if upgrading from a `vue-cli` based setup. Verify component imports and prop usages, especially if you were relying on undocumented internal structures. Re-test all OTP input functionalities thoroughly.","message":"Version `0.5.0` included a 'major refactor leading to reduced bundle size' and a migration from `vue-cli` to `vite` for setup and type definition generation. While specific API breaks were not explicitly detailed beyond the `chore!: publish v0.5.0` commit message, users on older versions (pre-0.5.0) should review their build configurations and any deep imports if upgrading, as internal paths and module resolution may have changed.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Upgrade to version `0.5.40` or later. This version includes fixes for 'paste otp codes from mobile autofill' and 'enhance OTP input handling for iOS and improve focus behavior', significantly improving usability on mobile platforms.","message":"Past versions of `vue3-otp-input` had issues with pasting OTP codes, particularly from mobile autofill, and inconsistent focus behavior, especially on iOS devices. These issues could lead to a poor user experience where OTPs were incorrectly parsed or inputs were difficult to navigate.","severity":"gotcha","affected_versions":"<0.5.40"},{"fix":"Upgrade to version `0.4.4` or newer. This version includes fixes for 'duplicate value when input from right and using 'v-model'' and 'Handle number input with type=\"text\" but retain other n' for more reliable input handling.","message":"When using `v-model` with `vue3-otp-input`, some users reported duplicate values when inputting from the right or with specific `input-type` configurations in versions prior to `0.4.4`. This could result in incorrect OTP values being submitted.","severity":"gotcha","affected_versions":"<0.4.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import OtpInput from 'vue3-otp-input';` in your script section. If using options API, ensure it's registered in the `components` option: `components: { OtpInput }`.","cause":"The OtpInput component was not correctly imported or registered in your Vue application. This often happens if it's not imported as a default export or if there's a typo.","error":"Failed to resolve component: OtpInput"},{"fix":"Initialize your `v-model` bound variable to an empty string, e.g., `const otpValue = ref('');` or `data() { return { otpValue: '' }; }`.","cause":"This error can occur if the `value` prop (or `v-model:value`) bound to `OtpInput` is not initialized or is not a string type, which the component expects for internal handling.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"fix":"Use a `ref` on the `OtpInput` component (e.g., `<OtpInput ref=\"otpInputRef\" ... />`) and then call the `clearInput()` method: `otpInputRef.value?.clearInput();`.","cause":"While `v-model` handles the value, clearing the physical input fields requires calling a specific component method if `v-model` alone doesn't trigger a visual reset.","error":"OTP input fields do not clear after submission or on button click."}],"ecosystem":"npm"}