Vue 3 OTP is a 23kB lightweight fully customizable OTP (One Time Password) component for web apps, compatible with Vue (Vue 3) and Autofill one time code from email / sms.
The OTP component allows you to utilize two display modes (divided and group) with an adjustable number of inputs. You can either write your own styling or utilize predefined styles for all tags, including active/error classes. Additionally, you can choose of three types of inputs (number, text, password) and insert your own error messages.
npm i @altgr4m/vue3-one-time-password
or
yarn add @altg4m/vue3-one-time-password
- Register (import) component into your app
<script setup>
import OneTimePassword from '@altgr4m/vue3-one-time-password'
// You can utilize styles provided by the package
// or customize them using own styling to suit your needs.
// - Look at the "Styling" section bellow
import "@altgr4m/vue3-one-time-password/style.css"
</script>
or
// main.js or main.ts
import OneTimePassword from "@altgr4m/vue3-one-time-password";
import "@altgr4m/vue3-one-time-password/style.css"
const app = createApp(App);
app.component('OneTimePassword', OneTimePassword)
app.mount('#app')
- Basic usage
<template>
<OneTimePassword/>
</template>
Event Name | Description |
@completed | Return string that represent OTP value typed in inputs when all digits are completed |
@changed | Return string that represent OTP value when input changed |
@paste | Triggered when paste value into OTP inputs |
reset() | You can call reset function that resets input value (see bellow) |
<template>
<OneTimePassword
@completed="onCompletedHandler"
@changed="onChangedHandler"
@paste="onPasteHandler"
ref="otpComponent"
/>
<button @click="resetOtp">Reset</button>
</template>
<script setup>
import {ref} from "vue";
import {OneTimePassword} from '@altgr4m/vue3-one-time-password'
const otpComponent = ref(null);
const onCompletedHandler = (token) => {
console.debug("Completed", token);
// write logic with completed code
};
const onChangedHandler = (token) => {
console.debug("Token changed", token);
// write logic with changed code
};
const onPasteHandler = (token) => {
console.debug("Token pasted", token);
// write logic with pasted code
};
const resetOtp = () => {
// reset input value if needed
otpComponent.value.reset()
}
</script>
Name | Type | Default | Options | Description |
inputCount | Number | 6 | number | Number of OTP inputs to be rendered. |
otpMode | String | "divided" | "divided", "group" | Change display of input, options: separate , group |
inputType | String | "number" | "number", "text", "password" | Type of input data |
placeholder | String | "-" | string | Placeholder of inputs where data places |
borderRadius | String | "5px" | string | Border radius of inputs (in both modes) |
inputsGapWidth | String | "10px" | string | Gap between inputs (in both modes) |
isDisabled | Boolean | false | true, false | Whether the input are Disabled or not |
isValid | Boolean | true | true, false | Whether the entered value is valid or not |
reverseDirection | Boolean | false | true,false | Whether the input is RTL or not |
isAutoFocus | Bool | true | true, false | The input should be focused-on when page rendered or not |
hideCursor | Bool | false | true, false | The input cursor should be hidden on focus |
You can use predefined styling (import bellow) or write custom css. Additionally, you can insert your own classes into component as props.
<script setup>
import "@altgr4m/vue3-one-time-password/style.css"
</script>
Name | Type | Default | Options | Description |
customWrapperClass | String | " " | string | Wrapper class |
customInputClass | String | " " | string | Input class |
customWrapperValidClass | String | "otp-wrapper-active" | string | Wrapper valid class |
customWrapperErrorClass | String | "otp-wrapper-error" | string | Wrapper error class |
customActiveInputClass | String | "otp-input-active" | string | Active input class (focused) |
<template>
<OneTimePassword
customWrapperClass="class-styling-wrapper"
customInputClass="class-styling-inputs"
customWrapperValidClass="class-styling-wrapper-valid"
customWrapperErrorClass="class-styling-wrapper-error"
customActiveInputClass="class-styling-inputs-active"
/>
</template>
<style>
.otp-app .class-styling-wrapper {
...
}
.otp-app .class-styling-inputs {
...
}
.otp-app .class-styling-wrapper-valid {
...
}
.otp-app .class-styling-wrapper-error {
...
}
.otp-app .class-styling-inputs-active {
...
}
</style>
<template>
<OneTimePassword otpMode="group"/>
</template>
Result:
<template>
<OneTimePassword :isValid="false" customWrapperErrorClass="wrapper-error-class">
<p>Error message<p>
</OneTimePassword>
</template>
<style>
.otp-app .wrapper-error-class {
color: red;
line-height: 1rem;
font-size: 12px;
text-align: left;
}
</style>
Result:
<template>
<OneTimePassword otpMode="divided" inputType="password" placeholder="" :inputCount="4" />
</template>
Result:
<template>
<OneTimePassword customActiveInputClass="custom-input-active" />
</template>
<style>
.otp-app .custom-input-active {
text-align: center;
border: 1px solid green;
}
</style>
Result :
https://github.com/gramblicka/demo-vue3-one-time-password
MIT