A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!- Demo

Install the Vue Focus Keyboard component for your project

npm install vue-focus-keyboard --save

Then, add component into your app

import FocusKeyboard from 'vue-focus-keyboard'; Vue.use(FocusKeyboard)

Use HTML template

<FocusKeyboard></FocusKeyboard>

There are 2 theme in Vue Focus Keyboard. They are dark and light (default: dark). You can use one of them with theme prop.

<FocusKeyboard :theme="light"></FocusKeyboard>

Also, you can set keyboard's width.

<FocusKeyboard :keyboardWidth="50%"></FocusKeyboard>

You don't like current keyboards? Well, set your custom keyboard layout. You can view default layouts in src/layout.js file

export default { data () { return { customLayout: { default: [ // Normal layout ], shifted: [ // Layout when press shift button ], capsed: [ // Layout when press capslock button ], alted: [ // Layout when press alt button ], shifted_capsed: [ // Layout when press shift + capslock button ], shifted_alted: [ // Layout when press shift + alt button ] }, } } }

Then, set your keyboard.

<FocusKeyboard :keyboard="customLayout"></FocusKeyboard>

MIT.