run the following command

restaurentPos>npm install simple-keyboard --save

create a file SimpleKeyboard.vue in the location:resources\js\components\block\

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

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

export default {
  name: "SimpleKeyboard",
  props: {
    keyboardClass: {
      default: "simple-keyboard",
      type: String
    },
    input: {
      type: String
    },
    inputName: {
      type: String
    }
  },
  data: () => ({
    keyboard: null
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      inputName: this.inputName
    });
  },
  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
      });
    }
  },
  watch: {
   inputName(inputName) {
      console.log("SimpleKeyboard: inputName updated", inputName);
      this.keyboard.setOptions({ inputName });
    },
    input(input) {
      this.keyboard.setInput(input);
    }
  }
};
</script>


<style scoped>
   .simple-keyboard {
      margin: auto;
     }
</style>

create a input file TextInputKeyboardBlock.vue in the location:resources\js\components\block\

<template>
   <input
    type="text"
    :id="inputName"
    :value="inputValue"
    :placeholder="'enter '+ inputName"
    @focus="onInputFocus"
    @input="onInputChange"
  />
</template>

<script>
export default {
  name: "TextInputKeyboardBlock",
  props: {
    inputs: {
      type: Object
    },
    inputName: {
      type: String
    }
  },
  methods: {
    onInputChange(input) {
      this.$emit("onInputChange", input);
    },
    onInputFocus(input) {
      this.$emit("onInputFocus", input);
    }
  },
  computed: {
    inputValue: function () {
      return this.inputs[this.inputName];
    }
  }
};
</script>


<style scoped>
</style>

create a password file PassInputKeyboardBlock.vue in the location:resources\js\components\block\

<template>
  <input
    type="password"
    :id="inputName"
    :value="inputValue"
    :placeholder="'enter '+ inputName"
    @focus="onInputFocus"
    @input="onInputChange"
  />
</template>

<script>
export default {
  name: "PassInputKeyboardBlock",
  props: {
    inputs: {
      type: Object
    },
    inputName: {
      type: String
    }
  },
  methods: {
    onInputChange(input) {
      this.$emit("onInputChange", input);
    },
    onInputFocus(input) {
      this.$emit("onInputFocus", input);
    }
  },
  computed: {
    inputValue: function () {
      return this.inputs[this.inputName];
    }
  }
};
</script>


<style scoped>
</style>

create a keyboard file PublicKayboardBlock.vue in the location:resources\js\components\block\

<template>
   <div class="keyboard">
     <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="inputs[inputName]" :inputName="inputName" />
   </div>
</template>

<script>

import SimpleKeyboard from "../block/SimpleKeyboard";
import "../../board.css";

  export default {
      data: () => ({  
         input: ""   
      }),
      props:['propsWriteOnEmailInput','propsWriteOnPassInput'],
    components:{
     SimpleKeyboard
    },
    mounted(){
      
     },
    methods: {
        onChange(input) {
                 //alert("i-"+input);
                /*if(this.propsWriteOnEmailInput==true){
                    this.$emit('updatePosEmail',input);
                }else if(this.propsWriteOnPassInput==true){
                    this.$emit('updatePosPass',input);
                }*/
         },
         onKeyPress(button) {
           //alert("b-"+button);
           //console.log("button", button);
                /*if(this.propsWriteOnEmailInput==true){
                    this.$emit('updatePosEmail',button);
                }else if(this.propsWriteOnPassInput==true){
                    this.$emit('updatePosPass',button);
                }*/
         },

   
    }
  };
</script>

<style>
</style>

Create a file board.css in the location:resources\js\

input {
  width: 100%;
  height: 100px;
  padding: 20px;
  font-size: 20px;
  border: none;
  box-sizing: border-box;
}

.simple-keyboard {
  max-width: 850px;
}