JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-material"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-material.css">
<div id="app">
<label for="normalInput">Non vue-material input</label>
<input type="test" name="normalInput" v-model="credentials.normalInput" v-validate data-vv-rules="required|email"/>
<span>{{errors.first('email')}}</span>

<br/><br/>

   <md-input-container :class="{'md-input-invalid': errors.has('email')}">
   <label for="email">Email</label>
            
            <md-input v-model="credentials.email" data-vv-name="email" type="email" v-validate name="email" data-vv-rules="required|email"></md-input>
            <span class="md-error">{{errors.first('email')}}</span>
          </md-input-container>
          
          <md-input-container :class="{'md-input-invalid': errors.has('password')}">
   <label for="password">Password</label>
            
            <md-input v-model="credentials.password" data-vv-name="password" type="password" v-validate name="password" data-vv-rules="required|min:5"></md-input>
            <span class="md-error">{{errors.first('password')}}</span>
          </md-input-container>
          <pre>{{errors}}</pre>
</div>

JavaScript

Vue.use(VueMaterial);
Vue.use(VeeValidate)

new Vue({
	el: '#app',
  data: {
  	credentials: {
    	email: '',
      password: '',
      normalInput: 'this input is not using vue-material'
    }
  }
});