Split Input Component for Vue 3.x

Used for otps, transaction pin, passwords etc

Install

NPM

npm i vue-split-input --save

Yarn

yarn add vue-split-input

Usage

import { createApp } from 'vue';
import Root from './App.vue'
import SplitInput from 'vue-split-input';

const app = createApp(App)

app.use(SplitInput)

app.mount('#app')
Props
Props #Type #default
inputNumber Number 6
type String as PropType<‘tel’, ‘password’, ‘text’> ‘tel’
className String ”
SplitInput.vue Usage

<template>
 <split-input
  v-model="input"
  class-name="w-12 h-8 rounded-sm p-5 font-bold text-lg"
  :input-number="4"
 />
</template>
Or

<script lang="ts">
 export default defineComponent({
  template: `
            <split-input
            v-model="input"
            class-name="w-12 h-8 rounded-sm p-5 font-bold text-lg"
            :input-number="4"
            />
        `,
 });
</script>

Thanks!
Damilare.

GitHub

View Github