Package Exports

v-pin-input
v-pin-input/dist/index.es.js
v-pin-input/dist/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-pin-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

yarn add v-pin-input
# or
npm i v-pin-input

Plugin installation

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

<script setup lang="ts">
import { ref } from 'vue'

const model = ref('')

const handleCompleted = (val: string) => {
  console.log('Completed', val)
}
</script>

<template>
  <pin-input
    class="wrapper"
    v-model="model"
    :length="6"
    autofocus
    input-class="pinInput"
    @completed="handleCompleted"
  />
</template>

<style>
.wrapper {
  display: flex;
  gap: 4px;
}

.pinInput {
  width: 20px;
  padding: 4px;
  border: none;
  border-bottom: 2px solid black;
  font-size: 1.5rem;
  color: black;
  margin-right: 4px;
  text-align: center;
}

.pinInput:focus {
  outline: none;
}
</style>

Props

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

Events

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