Implement in nuxtjs

[leerobert]

I made a plugin:

~/plugins/vue-virtual-keyboard.js:

import Vue from 'vue'
import VueVirtualKeyboard from 'vue-virtual-keyboard'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-virtual-keyboard/dist/vue-virtual-keyboard.css'

Vue.use(VueVirtualKeyboard)

And added it to nuxt.config.js

  plugins: [
    '~/plugins/vue-virtual-keyboard'
  ],

Then I created a nuxtjs page: ~/pages/testkeyboard.vue

<template>
  <VueVirtualKeyboard
    v-model="pym"
    :options="keyboardOption"
    class="ui-keyboard-case"
  />
</template>

<script>
export default {
  data () {
    return {
      keyboardOption: {
        usePreview: false,
        stickyShift: false,
        autoAccept: true,
        language: 'zh',
        display: {
          // overwrite key display
          accept: '确认',
          bksp: '删除',
          cancel: '取消',
          enter: '回车'
        }
      }
    }
  }
}
</script>

<style scoped>
.ui-keyboard-case {
  font-size: 40px;
  text-align: center;
  /* background: #fefefe; */
  border: 1px solid #ffe3e2;
  padding: 4px;
  width: 38%;
  height: auto;
  margin-right: 5%;
  /* left: 25%; */
  /* top: auto;
    bottom: 0px; */
  /* position: fixed; */
}
</style>

I get the error: " jQuery requires a window with a document "

[relzhong]

use this import { Keyboard } from 'vue-virtual-keyboard/dist/vue-virtual-keyboard';