JSFiddle - React, Tailwind, and code Playground

by venkatperi

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-resize-on-event/dist/umd/VueResizeOnEvent.min.js"></script>

<!-- App -->
<div id="app">
  <label>The <code>textarea's</code> height updates when the <code>input</code>  event fires</label>
  <textarea v-resize-on-input class="input" ref="textarea" rows="1"></textarea>
</div>

CSS

#app {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
}

label {
  font-size: 12px;
  font-family: sans-serif;
  width: 100%;
}

.input {
  width: 100%;
  margin-top: 10px;
  resize: none;
  background: #eee;
  border: #aaa solid 1px;
  border-radius: 3px;
  font-size: 20px;
}

JavaScript

console.clear()
console.log(Vue.version)

new Vue({
  el: '#app',
  mixins: [VueResizeOnEvent.default('input')],
})