Vue Pin Input (Vue 3)

Vue Pin Input is a Vue 3 input component for pins, otp etc.

Here is a live demo

!demo image

Installation

``bash
yarn add v-pin-input


or


npm i v-pin-input
`

Plugin installation

`ts
import { createApp } from 'vue'
import App from './App.vue'

import PinInput from 'v-pin-input'

const app = createApp(App)

app.use(PinInput)
app.mount('#app')
`

Usage


`vue


`




$3


| Property | Type | Default | Description |
| :-------------------- | :--------- | :------- | :---------- |
| length | number | 4 | The amount of the inputs |
| autofocus | boolean | true | Autofocus on first input on component load. |
| secure | boolean | false | Display * instead of character |
| characterPreview | boolean | true | Display character before switch to * in secure mode |
| charPreviewDuration | number | 300 | Ms to show the character before switch back to * |
| blurOnComplete | boolean | false | true if you want to blur the input when completed |

$3

| Name | Payload | Description |
| :-------------------- | :--------- | :---------- |
| completed | string` | Called once the user completes the input (fills the last empty input) |

References

This is pretty much a combination of vue-split-input and vue-pincode-input