One-time Password Input Component For Vue.js

Install & Download:

# NPM
$ npm install @bachdgvn/vue-otp-input --save

How to use it:

1. Install and import the component after vue.js.

import OtpInput from "@bachdgvn/vue-otp-input";

2. Register the component.

Vue.component("v-otp-input", OtpInput);

3. Create the One-time Password Input component in your app template.

<template>
  <div>
    <v-otp-input
      inputClasses="otp-input"
      :numInputs="4"
       separator="-"
      :shouldAutoFocus="true"
      @on-complete="handleOnComplete"
      @on-change="handleOnChange"
    />
  </div>
</template>

4. Do something once the password input is changed and is completely filled.

export default {
  methods: {
    handleOnComplete(value) {
      console.log("OTP: ", value);
    },
    handleOnChange(value) {
      console.log("OTP: ", value);
    }
  }
};

5. Apply your own CSS to the password input.

.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  textalign: "center";
}
.error {
  border: 1px solid red !important;
}

6. All possible props to customize the password input.

numInputs: {
  default: 4,
},
separator: {
  type: String,
  default: '**',
},
inputClasses: {
  type: String,
},
isInputNum: {
  type: Boolean,
},
shouldAutoFocus: {
  type: Boolean,
  default: false,
}

Download Details:

Author: bachdgvn

Live Demo: https://zlx025mxpp.codesandbox.io/

Download Link: https://github.com/bachdgvn/vue-otp-input/archive/master.zip

Official Website: https://github.com/bachdgvn/vue-otp-input

#vuejs #javascript #vue-js