quasar-app-extension-q-otp

Quasar App Extension which injects a Vue component - QOtp
4,687 12
vue vue3 quasar inputs otp one-time-password quasarframework otp-input one-time-code q-otp qotp otp-forminput
Install
npm install quasar-app-extension-q-otp
Latest Version:0.1.10
Vue:3
License:MIT
Last Updated:Aug 14, 2026
Links: GitHub  ·  npm
Maintainer: qertis

q-otp

The q-otp quasar extension allows you to seamlessly add the QOtp component into your Quasar application.

q-otp

Install

quasar ext add q-otp

Basic usage

<template>
  <QOtp
      placeholder="-"
      field-classes="q-ml-xs q-mr-xs"
      input-styles="opacity: 1 !important;"
      @complete="(code) => alert(code)"
  />
</template>
<script lang="ts" setup>
  import QOtp from 'quasar-app-extension-q-otp'
</script>

Documentation

Slots

Slot
control
footer

Custom props

Attributes Type
placeholder String
autofocus Boolean
num Number
separator String
conditional-class Array<String>
field-classes String/Array<String>
input-classes String/Array<String>
input-styles String/Object

QField props

Attributes Type
rules Array
error Boolean
reactive-rules Boolean
lazy-rules Boolean/String
loading Boolean
error-message String
label String
stack-label Boolean
bottom-slots Boolean
hint String
hide-hint Boolean
prefix String
suffix String
readonly Boolean
label-color String
color String
bg-color String
dark Boolean
filled Boolean
outlined Boolean
borderless Boolean
standout Boolean/String
rounded Boolean
square Boolean
dense Boolean
item-aligned Boolean

Events

Event Callback
@change (pin) => String
@complete (pin) => String

Methods

Method Callback
blur () => void
focus () => void
clear () => void
getPin () => String

Uninstall

quasar ext remove q-otp

Contributing

Feel free to open issues and pull requests!

License

MIT (c) Denis Baskovsky.

Related Packages

@teselia/otp

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

0 0
one-time-code otp otp-input vue 2fa a11y accessibility custom-element verification-code wcag +1
@k-otp/sdk

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

1,010 0
one-time-password otp otp-input vue alimtalk headless-ui k-otp korea orpc react +3
quasar-app-extension-storagedirective

A Quasar AE for a Vue Custom Directive for persistency of v-model vars

404
quasar quasarframework vue directives storage
wts-otp

Zero-dependency, accessible OTP, PIN, and verification-code input for JavaScript...

1,532 0
one-time-code one-time-password otp otp-input vue 2fa a11y accessible angular auth-code-input +13
q-colorize-mixin

Quasar color mixin

41,510 3
quasar quasarframework vue background-color color mixin

Version History

Version Released Vue License
0.1.10 >=3.5.38 MIT
0.1.9 >=3.5.38 MIT
0.1.8 >=3.5.38 MIT
0.1.7 MIT
0.1.6 MIT