Getting Started

Installation

npm

npm install vue-otp-pro

pnpm

pnpm add vue-otp-pro

yarn

yarn add vue-otp-pro

Quick Start

Import the component and its styles:

<script setup lang="ts">
import { ref } from 'vue'
import { OtpInput } from 'vue-otp-pro'
import 'vue-otp-pro/dist/vue-otp-pro.css'

const otp = ref('')

function handleComplete(value: string) {
  console.log('OTP entered:', value)
}
</script>

<template>
  <OtpInput v-model="otp" @complete="handleComplete" />
</template>

Try it:

Live Preview

Global Registration

Register the component globally with the Vue plugin:

import { createApp } from 'vue'
import { VueOtpPro } from 'vue-otp-pro'
import 'vue-otp-pro/dist/vue-otp-pro.css'

const app = createApp(App)
app.use(VueOtpPro) // registers <OtpInput> globally
app.mount('#app')

With Nuxt

// plugins/vue-otp-pro.client.ts
import { VueOtpPro } from 'vue-otp-pro'
import 'vue-otp-pro/dist/vue-otp-pro.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueOtpPro)
})

Peer Dependencies

Vue OTP Pro requires Vue 3.3+ as a peer dependency.

What's Next?

• Props & Events — Full API reference
• Theming — 11 themes, CSS custom properties, dark mode
• Live Examples — Interactive playground with all options

Pratik Patel

Enjoying Vue OTP Pro? Consider sponsoring to support continued development and new features.

GitHub Twitter Sponsor