A virtual keyboard component built with VUE 3 and VITE.

Inspired from simple-keyboard by Francisco Hedge and from Keyboard(jQuery plugin) by Rob Garrison.

• Fully responsive.
• Supports unicode values in the layout. Both images and special characters.
• Supports dark and light theme out of the box. Using the user's preferred color scheme.
• Theme can be set with the built-in theme switcher. It uses local storage to remember the selected theme.
• 150 microsoft keyboard layouts included in the package.

• Add support for physical keyboard.
• Support for filtering layouts with includedLayouts prop.
• Support for providing default display option as prop.
• Add possibility to style one or more buttons different from the rest.
• Refactor keyboard button to accept multiple layout values and display them in the button.

• Fix function button issues.
• Fix issue with button rendering the space button. It gets the wrong css class so the styling is incorrect.
• Check missing microsoft layouts.
• Create new documentation (WIP).

• Add your own layout by following these steps.
• Exported Interfaces.
• Select options. Complete list.

List of css variables.

• Default with theme and layout selector.
• Styled buttons.
• Demo with customized layout from app.
• Playground where devs can test their layouts(sandbox).

• Click to see the complete list.
• Microsoft layout's.

• List of QWERTY keyboard language variants
• README Icon's List
• Symbols Ascii code list
• Keyboard example
• Keyboard example
• Keyboard example
• Vue Search Select

Help is needed defining which images or text to use for the different keyboard layouts. Look at the German display definition below:

 display: { // eslint-disable sort-keys '{alt}': `Alt`, '{altleft}': `Alt`, '{altright}': `Alt Gr`, '{bksp}': `\u232b`, '{caps}': `\u21ea`, '{ctrl}': `Strg`, '{ctrlleft}': `Strg`, '{ctrlright}': `Strg`, '{empty}': ` `, '{enter}': `\u21A9`, '{lock}': `caps \u21ea`, '{shift}': `\u2191`, '{shiftleft}': `\u2191`, '{shiftright}': `\u2191`, '{space}': ` `, '{tab}': `\u2b7e`, }, 

Create a new issue or report a bug.

If you enjoyed this project — or just feeling generous, consider buying me a beer. Cheers! 🍻

npm install 

npm run dev 

npm run build 

npm run lint 

npm run lint:style 

npm run lint:fix 

npm run build 

In order to publish the package, you need to follow these steps

npm version patch -m "message" 

git tag 

 git push --follow-tags 

 npm publish