Vue OTP Input

Simple customizable OTP input for Vue 3. - See a live demo here.

Documentation

Read the full documentation here

Installation

1npm install @toneflix/otp-input
2#or
3yarn add @toneflix/otp-input
4#or
5pnpm add @toneflix/otp-input

Usage

Global Registration

You can make OTP Input available throughout your Vue project.

main.js or main.ts

1import '@toneflix/otp-input/dist/lib/style.css';
2import { createApp } from 'vue';
3import App from './app.vue';
4import OtpInput from '@toneflix/otp-input';
5
6const app = createApp(App);
7app.use(OtpInput);
8app.mount('#app');

Local Registration

You can also import the component in your Vue component.

SomeComponent.vue

1<script setup>
2import '@toneflix/otp-input/dist/lib/style.css';
3import { OtpInput } from '@toneflix/otp-input';
4</script>

Use the Registered Component in Your Vue Template

SomeComponent.vue

1<script setup lang="ts">
2import '@toneflix/otp-input/dist/lib/style.css';
3import { OtpInput } from '@toneflix/otp-input';
4import { ref } from 'vue';
5
6const otp = ref<string>('');
7</script>
8
9<template>
10  <div style="display: flex; flex-direction: row;">
11    <otp-input v-model="otp" />
12  </div>
13</template>