Multiple Layout Support for Vue Keyboard

by Marty Wallace

The vue-keyboard component now accepts multiple layouts. This is a major alteration deserving of a 2.0 label, which has been marked in the repository as a release.

To leverage multiple layouts, simply provide an array to the new layouts attribute:

<keyboard :layouts="['abc', '123']" />

Note: The value must be bound using v-bind:layouts or simply :layouts, else it will be interpreted as a single layout string containing the characters [ and ].

The first layout will be the default and the layout can be changed by creating a special goto button in the keyboard with the following syntax:

{toggle:goto:1}

Note: The layouts are zero-indexed, so the above would go to the second listed layout available.

Complete example with the ability to toggle between two layouts:

<keyboard :layouts="['abc{numbers:goto:1}', '123{letters:goto:0}']" />
  • vue
  • javascript