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.

Installation

yarn v-pin-input
# or
npm 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>
  <div class="wrapper">
    <pin-input
      v-model="model"
      :length="6"
      autofocus
      input-class="pinInput"
      @completed="handleCompleted"
    />
  </div>
</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>

References

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