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.

Installation

npm i @altgr4m/vue3-one-time-password

or

yarn add @altg4m/vue3-one-time-password

Usage

1. Register (import) component into your app

a) Register locally

<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

b) Register globally

//  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')

2. Basic usage

<template>
    <OneTimePassword/>
</template>

Events

Events usage:

<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>

Props

Styling

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>

Styling props:

Example styling of component

<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>

Examples

Group Mode:

<template>
    <OneTimePassword otpMode="group"/>
</template>

Result:

Error Message:

<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 :

Demo

https://github.com/gramblicka/demo-vue3-one-time-password

License

MIT