vue3-otp

Library to use OTP

Installation

To install the latest version:

npm install --save vue3-otp

Import to your components

import { Vue3Otp } from "vue3-otp";

Example:

<template>
  <vue3-otp
    :otp="otp"
    :inputsCount="9"
    @complete="handleComplete"
  />
</template>

Props

Name	Type	Required	Default	Description
inputsCount	number	false	4	Number of inputs
otp	string	false	""	Filled in inputs
options	object	false	{ focusOnLoad: true, disableArrows: true, focusNextOnInput: true }

Events

Name	Description
complete	Handle complete event

Timer

Timer events:

Name	Description
start	Start timer
stop	Stop timer
resume	Resume stopped timer
reset	Reset timer

Timer data:

Name	Type
duration	number
timer	string

Import timer hook. Example:

import { Vue3Otp, useTimer } from 'vue3-otp';

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Vue3Otp, useTimer } from 'vue3-otp';

export default defineComponent({
  components: {
    Vue3Otp
  },
  setup() {
    const otp = ref("5");
    const handleComplete = (value: string) =>
      console.log('complete: ', value);
      
    return {
      ...useTimer(),
      otp,
      handleComplete,
    }
  }
});
</script>

<template>
  <vue3-otp
    :otp="otp"
    :inputsCount="6"
    @complete="handleComplete"
  />
  <div>
    {{ timer }}
    <button @click="reset">Reset</button>
    <button @click="stop">Stop</button>
    <button @click="resume">Resume</button>
  </div>
</template>

Resend Sms

<script lang="ts">
import { defineComponent } from 'vue';
import { Vue3Otp, useTimer } from 'vue3-otp';

export default defineComponent({
  components: {
    Vue3Otp
  },
  setup() {
    const otp = ref("");
    const { timer, reset } = useTimer();
    const resend = () => {
      /** Send sms api */

      /** Clear inputs */
      otp.value = " ";

      /** Reset timer */
      reset();
    };
    return {
      otp,
      resend,
      timer,
    }
  }
});
</script>

<template>
  <div id="app">
    <vue3-otp :otp="otp" />
    <div class="timer">
      {{ timer }}
      <a href="#" @click.prevent="resend">Send again</a>
    </div>
  </div>
</template>

Some basic styles

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.vue3-otp {
  display: inline-flex;
  gap: 10px;
}
input {
  width: 50px;
  height: 50px;
  text-align: center;
  border-color: transparent transparent #999 transparent;
  border-width: 1px;
}
input:focus {
  border-bottom-color: #000;
  outline: none;
}
.timer {
  padding-top: 50px;
}