JSFiddle - React, Tailwind, and code Playground

by Rel Zhong

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-virtual-keyboard/dist/vue-virtual-keyboard.css">
<div id="app">
{{message}}
	<keyboard
	  :options="keyboardOption"
	  class="ui-keyboard-case"
	  v-model="message"
	></keyboard>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-virtual-keyboard"></script>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue-virtual-keyboard!',
	keyboardOption: {
	usePreview: false,
	stickyShift: false,
	autoAccept: true,
	language: 'zh',
	display: { // overwrite key display
	  accept: 'submit',
	  bksp: 'delete',
	},
  },
  }
})