JSFiddle - React, Tailwind, and code Playground

by Christian Gambardella

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="test">
  <sign-in></sign-in>
</div>

Babel + JSX

Vue.component('sign-in', {
  data: function() {
  	return {
  		login: '',
  		password: ''
  	}
  },
  template: `
  <form method="POST" action="" after="test" @submit.prevent="signIn">
  <input type="text" v-model="login" placeholder="Address e-mail" />
    <input type="password" v-model="password" placeholder="Password" />
    <div class="forget">
      Forget your password? <a href="#">Click here</a>.
    </div>
    <div class="text-center">
      <input type="submit" class="button white" value="Sign in">
    </div>
</form>`,
  mounted: function() {
  	// this.$parent[this.after]()
  },
  methods: {
  	signIn: function() {
			window.alert(`login: ${this.login}`)
  	}
  }
});
window.socketVue = new Vue({
  el: '#test',
});