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.

Demos

Type one char per time

or... Paste the entire value

Installation

npm install vue-fake-input

or if you prefer yarn

yarn add vue-fake-input

Usage

Global

You may install Vue Fake Input globally:

import Vue from 'vue';
import VueFakeInput from 'vue-fake-input';

Vue.use(VueFakeInput);

This will make VueFakeInput available to all components within your Vue app.

Local

Include VueFakeInput directly into your component using import:

import VueFakeInput from 'vue-fake-input';

export default {
  ...
  components: {
    VueFakeInput
  }
  ...
};

In order to get the full value of the inputs, you have to add a v-model bind on

vue-fake-input and link to any data attribute on your component.

Example

<vue-fake-input
  :length="5"
  :fontSize="40"
  inputColor="#31bce6"
  fontColor="#ffc107"
  :allowPaste="false"
  v-model="fullValue"
/>
...
export default {
  ...
  data() {
    return {
      fullValue: '',
    };
  }
  ...

Result:

Configuration (props accepted)

GitHub