Split Input Component for Vue 3.x

Used for otps, transaction pin, passwords etc

$3

#### NPM

``bash
//with npm
npm i vue-split-input --save

//with yarn
yarn add vue-split-input

//with pnpm
pnpm i vue-split-input
`

$3

`
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 | #description |
| :----------: | :-------------------------------------------: | :------: | :--------------------------------------------: |
| inputNumber | Number | 6 | Number for input rendered |
| type | String as PropType<'tel', 'password', 'text'> | 'tel' | Input type. Optional value: password, text |
| className | String | '' | Custom class/style for each input |
| disabled | Boolean | false | Disabled all input |
| placeholder | String | '' | Default description for each input |
| placeholders | Array | null | Default description for all inputs |

###### Events

| Name | #Description |
| :---: | :------------------------------------------------------------: |
| focus | custom focus method that passes the input event as an argument |

###### SplitInput.vue Usage

`vue

`

###### Or

`vue

`

You can also pass a ref to access the component dom and objects directly

`vue



``

Thanks!
Damilare.