Vue3 simple OTP InputGetting Started
Installation
Prerequisites
- Node.js version 16 or higher.
- Text Editor.
- VSCode is recommended, along with the official Vue extension.
To get started, you can install it with:
sh
$ npm i @healerlab/vue3-simple-otp-input$ npm i @healerlab/vue3-simple-otp-inputsh
$ pnpm add @healerlab/vue3-simple-otp-input$ pnpm add @healerlab/vue3-simple-otp-inputsh
$ yarn add @healerlab/vue3-simple-otp-input$ yarn add @healerlab/vue3-simple-otp-inputUsage
Import the component and register it locally in your Vue component:
vue
<script setup lang="ts">
import { HOtpInput } from "@healerlab/vue3-simple-otp-input";
const handleFinish = (otpCode: string) => {
// write logic with received code
}
const handleChange = (otpCode: string) => {
// write logic with changed code
}
</script><script setup lang="ts">
import { HOtpInput } from "@healerlab/vue3-simple-otp-input";
const handleFinish = (otpCode: string) => {
// write logic with received code
}
const handleChange = (otpCode: string) => {
// write logic with changed code
}
</script>Use the component in your template:
vue
<HOtpInput
:length="6"
type="text"
@on-finish="handleFinish"
@on-change="handleChange"
wrapperClassName="otp-input"
:outlined="true"
ref="otpInput"
:only-number="true"
separator="-"
separatorType="middle"
/><HOtpInput
:length="6"
type="text"
@on-finish="handleFinish"
@on-change="handleChange"
wrapperClassName="otp-input"
:outlined="true"
ref="otpInput"
:only-number="true"
separator="-"
separatorType="middle"
/>This is minimal style for your input, you can change it to match your use-case:
scss
<style scoped lang="scss">
.otp-input {
:deep(input) {
outline: none;
width: 30px;
padding: 12px;
font-size: 22px;
border: none;
margin-left: 10px;
text-align: center;
&:first-child {
margin-left: 0;
}
&:focus {
outline: none
}
}
:deep(span) {
padding: 0 0px 0 10px;
font-size: 30px;
}
}
</style><style scoped lang="scss">
.otp-input {
:deep(input) {
outline: none;
width: 30px;
padding: 12px;
font-size: 22px;
border: none;
margin-left: 10px;
text-align: center;
&:first-child {
margin-left: 0;
}
&:focus {
outline: none
}
}
:deep(span) {
padding: 0 0px 0 10px;
font-size: 30px;
}
}
</style>In next section, you can explore more about props, event within this component