title: Nuxt - Virtual touch keyboard (vue-touch-keyboard)
body: <p>I'm having some problems with the virtual keyboard <a href="https://github.com/icebob/vue-touch-keyboard" rel="nofollow noreferrer">vue-touch-keyboard</a>, using Nuxt and Vue.</p>
  <p>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.</p>
  <p>I would appreciate any feedback or just a tip how to debug this problem.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;Text input&quot; @focus=&quot;show&quot; data-layout=&quot;normal&quot; /&gt;
      &lt;vue-touch-keyboard :options=&quot;options&quot; v-if=&quot;visible&quot; :layout=&quot;layout&quot; :cancel=&quot;hide&quot; :accept=&quot;accept&quot; :input=&quot;input&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import VueTouchKeyboard from &quot;vue-touch-keyboard&quot;;
    import style from &quot;vue-touch-keyboard/dist/vue-touch-keyboard.css&quot;; // load default style
  
    Vue.use(VueTouchKeyboard);
  
    export default {
      data: {
        visible: false,
        layout: &quot;normal&quot;,
        input: null,
        options: {
          useKbEvents: false,
          preventClickEvent: false
        }
      },
  
      methods: {
          accept(text) {
            alert(&quot;Input text: &quot; + 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;
          }
      }
    }
  &lt;/script&gt;
  </code></pre>