vue-otp-box

Simple but amazing one-time password input component for the web as well as mobile with Vue 2.x.
1,794 1
Install
npm install vue-otp-box
Latest Version:1.1.7
Vue:2
License:MIT
Last Updated:Jan 5, 2023
Links: GitHub  ·  npm
Maintainer: apurv_zeppelin

vue-otp-box

Simple but amazing one-time password input component for the web as well as mobile with Vue 2.x.

Installation

npm i vue-otp-box

How to use it

<template>
  <div>
    //Example
    <vue-otp-box
      :numberOfBoxes="4"
      color="orange"
      position="center"
      @inputValue="inputValue"
    ></vue-otp-box>
  </div>
</template>

<script>
 import VueOtpBox from "vue-otp-box";
 import "vue-otp-box/dist/VueOtpBox.css";

export default {
  components: {
    VueOtpBox
  },

  data() {
    return {
      otp: undefined,
    };
  },

  methods: {
    inputValue(otp) {
      this.otp = otp;
    }
  }
};
</script>

Props

Prop Name Type Default Value Value
numberOfBoxes Number 4 4 or 6 is recommended
color String java (#26a69a) Any color will work
position String center "left", "right", "center"

Event

Name Description
@inputValue gets you the otp code of the input.

Related Packages

@8bu/vue-otp-input

Simple & Flexible OTP Style Input

9,953
@teselia/otp

Accessible one-time code input (OTP), shipped as a framework-agnostic Web Compon...

0 0
quasar-app-extension-q-otp

Quasar App Extension which injects a Vue component - QOtp

4,687 12
@k-otp/sdk

Official K-OTP (Korean OTP API) SDK: issue and verify one-time passwords from br...

1,010 0
vue-input-otp

https://github.com/wobsoriano/vue-input-otp/assets/13049130/c5080f41-f411-4d38-a...

2,132,109 90

Version History

Version Released Vue License
1.1.7 ^2.6.11 MIT
1.1.6 ^2.6.11 MIT
1.1.5 ^2.6.11 MIT
1.1.4 ^2.6.11 MIT
1.1.3 ^2.6.11 MIT