'Nuxt - Virtual touch keyboard (vue-touch-keyboard)

I'm having some problems with the virtual keyboard vue-touch-keyboard, using Nuxt and Vue.

I'm using the same code as given in the example, but for some reason my page doesn't load (just keeps loading). Code is compiled successfully and I can't see any errors in the console.

I would appreciate any feedback or just a tip how to debug this problem.

<template>
  <div>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
    <vue-touch-keyboard :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
  </div>
</template>

<script>
  import VueTouchKeyboard from "vue-touch-keyboard";
  import style from "vue-touch-keyboard/dist/vue-touch-keyboard.css"; // load default style

  Vue.use(VueTouchKeyboard);

  export default {
    data: {
      visible: false,
      layout: "normal",
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    },

    methods: {
        accept(text) {
          alert("Input text: " + text);
          this.hide();
        },

        show(e) {
          this.input = e.target;
          this.layout = e.target.dataset.layout;

          if (!this.visible)
            this.visible = true
        },

        hide() {
          this.visible = false;
        }
    }
  }
</script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source