Split Input Component for Vue 3.x

Overview

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.

Comments
Releases(v1.2.0)
  • v1.2.0(May 21, 2022)

    What's Changed

    • Update dependency vite to v2.9.7 by @renovate in https://github.com/dammy001/vue-split-input/pull/73
    • Update dependency @types/node to v16.11.33 by @renovate in https://github.com/dammy001/vue-split-input/pull/72
    • Update dependency vite to v2.9.8 by @renovate in https://github.com/dammy001/vue-split-input/pull/75
    • Update dependency @vitejs/plugin-vue to v2.3.2 by @renovate in https://github.com/dammy001/vue-split-input/pull/74
    • Update dependency @types/node to v16.11.34 by @renovate in https://github.com/dammy001/vue-split-input/pull/76
    • Update dependency @types/node to v16.11.35 by @renovate in https://github.com/dammy001/vue-split-input/pull/79
    • Update dependency @vitejs/plugin-vue to v2.3.3 by @renovate in https://github.com/dammy001/vue-split-input/pull/77
    • Update dependency vite to v2.9.9 by @renovate in https://github.com/dammy001/vue-split-input/pull/78
    • Update dependency @types/node to v16.11.36 by @renovate in https://github.com/dammy001/vue-split-input/pull/80
    • Update dependency vue to v3.2.35 by @renovate in https://github.com/dammy001/vue-split-input/pull/81
    • chore: fix paste focus on wrong input by @dammy001 in https://github.com/dammy001/vue-split-input/pull/82

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/v1.1.2...v1.2.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1.2(May 6, 2022)

  • v1.1.0(Feb 19, 2022)

    What's Changed

    • Update dependency vue to v3.2.30 by @renovate in https://github.com/dammy001/vue-split-input/pull/42
    • Update dependency @types/node to v16.11.24 by @renovate in https://github.com/dammy001/vue-split-input/pull/43
    • Update dependency vue to v3.2.31 by @renovate in https://github.com/dammy001/vue-split-input/pull/44
    • Update dependency @types/node to v16.11.25 by @renovate in https://github.com/dammy001/vue-split-input/pull/45
    • chore(build): migrate to vite for build by @dammy001 in https://github.com/dammy001/vue-split-input/pull/46

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/v1.0.3...v1.1.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.3(Feb 5, 2022)

  • v1.0.2(Feb 5, 2022)

    What's Changed

    • chore(deps): add bumpp devDeps by @dammy001 in https://github.com/dammy001/vue-split-input/pull/40

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/v1.0...v1.0.2

    Source code(tar.gz)
    Source code(zip)
  • v1.0(Feb 5, 2022)

    What's Changed

    • Update dependency vue to v3.2.29 by @renovate in https://github.com/dammy001/vue-split-input/pull/36
    • Update dependency @types/node to v16.11.22 by @renovate in https://github.com/dammy001/vue-split-input/pull/37
    • added clearAllInput method expose to parent component using ref by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39
      • Added new props disabled, placeholder and placeholders by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39
    • Migrate to pnpm by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39
    • Add vue usage example by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39
    • Fix backspace bug on android mobile devices by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39
    • README updated by @dammy001 in https://github.com/dammy001/vue-split-input/pull/39

    🤌🏽🤌🏽🤌🏽

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.35...v1.0

    Source code(tar.gz)
    Source code(zip)
  • 0.9.35(Jan 21, 2022)

    What's Changed

    • Update dependency @types/node to v16.11.20 by @renovate in https://github.com/dammy001/vue-split-input/pull/32
    • Update dependency typescript to v4.5.5 by @renovate in https://github.com/dammy001/vue-split-input/pull/34
    • Update dependency @types/node to v16.11.21 by @renovate in https://github.com/dammy001/vue-split-input/pull/33
    • Update dependency vue to v3.2.28 by @renovate in https://github.com/dammy001/vue-split-input/pull/35

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.34...0.9.35

    Source code(tar.gz)
    Source code(zip)
  • 0.9.34(Jan 16, 2022)

    What's Changed

    • Update dependency @types/node to v16.11.19 by @renovate in https://github.com/dammy001/vue-split-input/pull/30
    • chore(deps): update dependency vue to v3.2.27 by @renovate in https://github.com/dammy001/vue-split-input/pull/31

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.32...0.9.34

    Source code(tar.gz)
    Source code(zip)
  • o.9.33(Jan 16, 2022)

    What's Changed

    • Update dependency @types/node to v16.11.19 by @renovate in https://github.com/dammy001/vue-split-input/pull/30
    • chore(deps): update dependency vue to v3.2.27 by @renovate in https://github.com/dammy001/vue-split-input/pull/31

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.32...o.9.33

    Source code(tar.gz)
    Source code(zip)
  • 0.9.32(Jan 3, 2022)

    What's Changed

    • chore(typecheck): add typecheck by @dammy001 in https://github.com/dammy001/vue-split-input/pull/27

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.31...0.9.32

    Source code(tar.gz)
    Source code(zip)
  • 0.9.31(Jan 3, 2022)

    What's Changed

    • chore(ci): update publish workflow by @dammy001 in https://github.com/dammy001/vue-split-input/pull/29

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.3...0.9.31

    Source code(tar.gz)
    Source code(zip)
  • 0.9.3(Jan 3, 2022)

    What's Changed

    • Update npm-publish.yml by @dammy001 in https://github.com/dammy001/vue-split-input/pull/28

    New Contributors

    • @dammy001 made their first contribution in https://github.com/dammy001/vue-split-input/pull/28

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.2...0.9.3

    Source code(tar.gz)
    Source code(zip)
  • 0.9.2(Jan 3, 2022)

    What's Changed

    • Update dependency typescript to v4.5.4 by @renovate in https://github.com/dammy001/vue-split-input/pull/20
    • Update dependency @types/node to v16.11.13 by @renovate in https://github.com/dammy001/vue-split-input/pull/21
    • Update dependency @types/node to v16.11.14 by @renovate in https://github.com/dammy001/vue-split-input/pull/22
    • Update dependency @types/node to v16.11.15 by @renovate in https://github.com/dammy001/vue-split-input/pull/23
    • Update dependency @types/node to v16.11.16 by @renovate in https://github.com/dammy001/vue-split-input/pull/24
    • Update dependency @types/node to v16.11.17 by @renovate in https://github.com/dammy001/vue-split-input/pull/25
    • Update dependency @types/node to v16.11.18 by @renovate in https://github.com/dammy001/vue-split-input/pull/26

    Full Changelog: https://github.com/dammy001/vue-split-input/compare/0.9.1...0.9.2

    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Dec 6, 2021)

Owner
Anjorin Damilare
Software Engineer
Anjorin Damilare
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 11 Jun 9, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 16 Aug 31, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
A tags input component for VueJS

A tags input component for VueJS

Vojtěch Laňka 0 Apr 20, 2021
Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Benjamin Arambide 5 Nov 19, 2021
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Text Mask 8.2k Sep 30, 2022
🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022