Mutli-Language support using Simple Keyboard

Question

I am new to vue js and is trying to implement https://virtual-keyboard.js.org/vuejs/

I have implemented the basic layout but need to do multi-languagehttps://github.com/simple-keyboard/simple-keyboard-layouts support using different language layouts as mentioned.

But I can't shift between languages. I can't actually find a way to inject different language files.

<template>
  <div :class="keyboardClass"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";
// import SimpleKeyboardLayouts from "../lib/components/Layouts";

export default {
  name: "SimpleKeyboard",
  props: {
    keyboardClass: {
      default: "simple-keyboard",
      type: String,
    },
    input: {
      type: String,
    },
  },
  data: () => ({
    keyboard: null,
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);

      /**
       * If you want to handle the shift and caps lock buttons
       */
      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
        layoutName: shiftToggle,
      });
    },
    handleLanguages() {
      let currentLayoutlang = this.keyboard.options.layoutName;
      let languageToggle =
        currentLayoutlang === "english" ? "german" : "english";
      this.keyboard.setOptions({
        layoutName: languageToggle,
      });
    },
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

A sample layout language file which I have is like

import { LayoutItem } from "../interfaces";

/**
 * Layout: German
 */
export default <LayoutItem>{
  layout: {
    default: [
      "^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
      "{tab} q w e r t z u i o p \u00FC +",
      "{lock} a s d f g h j k l \u00F6 \u00E4 # {enter}",
      "{shift} < y x c v b n m , . - {shift}",
      ".com @ {space}",
    ],
    shift: [
      '\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
      "{tab} Q W E R T Z U I O P \u00DC *",
      "{lock} A S D F G H J K L \u00D6 \u00C4 ' {enter}",
      "{shift} > Y X C V B N M ; : _ {shift}",
      ".com @ {space}",
    ],
  },
};

Answer 1

I would recommend using the simple-keyboard-layouts, and then do this in your method where you want to change the language:

handleLanguages() {
  let languageToggle =
    this.keyboard.options.layoutName === "english" ? "german" : "english";
  const layout = new this.SimpleKeyboardLayouts().get(languageToggle);
  this.keyboard.setOptions({ layout });
}

That is how you can toggle languages using this library. If it is missing a language you need, throw up a PR in the simple-keyboard-layouts, I've found the author to be very responsive and helpful with the layouts I've added.

Here is a fiddle (you may need to click the refresh icon within the fiddle for the button to show up), note some of the newer versions of simple-keyboard-layouts seem to not work with this functionality, so be sure to check the package.json for version numbers that are compatible or update your code to match whatever the latest and greatest is from this library. These are the versions that definitely do work for this:

"simple-keyboard": "^2.32.108",
"simple-keyboard-layouts": "^1.15.165",