Vue Keyboard Usage Guide

Installation

Either download the files from the repository or install with NPM/Yarn:

$ npm install --save vue-keyboard
$ yarn add vue-keyboard

Basic Usage

Once you've added the component to your application using vue-loader or vueify, you will be able to use it. To embed a simple keyboard with numbers 0-9, the markup could look like:

<keyboard layouts="123|456|789|0" />

Which looks like:

Capturing Input

You can use the v-model attribute to bind the keyboard value to a value in your application.

Assuming your application has a data property input:

<keyboard v-model="input" layouts="123|456|789|0" />

Limiting Length

You can use the maxlength attribute to restrict the maximum input length via the keyboard.

<keyboard v-model="input" :maxlength="6" layouts="123|456|789|0" />

Multiple Layouts

Multiple keyboard layouts can be provided an an array to the layouts attribute. From there you can use the special goto:n key to toggle between them:

<keyboard :layouts="[
  '123|456|789|0{toggle:goto:1}',
  'ABC|DEF|GHI|J{toggle:goto:0}'
]" />

Special Keys

Custom functionality can be attached to keys within the keyboard using the {text:action} syntax, for example:

<keyboard layouts="01234|56789|{double:dub}" @dub="double" />

In this example, we tell the double button to emit an event named dub. We listen for that event with the @dub="double" directive, which calls the double function in the main Vue application, which looks like this:

double(keyboard) {
  if (keyboard.value.length > 0) {
    keyboard.mutate((keyboard.value * 2).toString());
  }
}

Note: there is some inbuilt special functionality, those being: space to add a whitespace character, backspace to delete the last character, clear to clear all input and goto:n to swap the keyboard over to a different layout.

Complete Example

A complete example with a full QUERTY keyboard, the ability to toggle between upper and lowercase characters, the input length limited to 16 and a special key that reverses the current value might look like:

<keyboard
  v-model="input"
  :layouts="[
    '1234567890{delete:backspace}|qwertyuiop|asdfghjkl|{shift:goto:1}zxcvbnm|{space:space}{reverse:reverse}',
    '!@#$%^&*(){delete:backspace}|QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{space:space}{reverse:reverse}'
  ]"
  :maxlength="16"
  @reverse="reverse"
/>

Giving this result: