JSFiddle - React, Tailwind, and code Playground

by Abdelrahman Awad

HTML

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.3/dist/vee-validate.js"></script>
<div id="app">
  <input type="text" name="firstName" v-validate="'required'" v-model="firstName" placeholder="First Name">
  <span>{{ errors.first('firstName') }}</span>
  <input type="text" name="lastName" v-validate="'required'" v-model="lastName" placeholder="Last Name">
  <span>{{ errors.first('lastName') }}</span>
  <input type="email" name="email" v-validate="'required|email'" v-model="email" placeholder="Email">
  <span>{{ errors.first('email') }}</span>
  <input type="password" name="password" v-validate="'required|min:8'" v-model="password" placeholder="Password">
  <span>{{ errors.first('password') }}</span>
  
  <button @click="reset">Reset</button>
</div>

CSS

input {
  margin-bottom: 10px;
  display: block;
}

span {
  margin-bottom: 10px;
  display: block;
}

JavaScript

Vue.use(VeeValidate);

new Vue({
	el: '#app',
  data: () => ({
  	firstName: null,
  	lastName: null,
  	email: null,
  	password: null
  }),
  methods: {
  	reset () {
    	this.firstName = null;
      this.lastName = null;
  		this.email = null;
  		this.password = null;
      this.$validator.reset();
    }
  }
 })