JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://rawgit.com/karol-f/vue-element/master/dist/vue-element.js"></script>
<div id="app">
    <custom-module name="example">
        <ajax-form action="#" method="post">
            <form-row>
                <form-label id="username">Username*</form-label>
                <form-input id="username" type="text" value="demo"></form-input>
            </form-row>

            <form-row>
                <form-label id="username">Password*</form-label>
                <form-input id="username" type="password" value="demo"></form-input>
            </form-row>
        </ajax-form>
    </custom-module>
</div>

JavaScript

Vue.element('form-label', {
	props: ['id'],
    template: '<label :for="id" class="form-label"><slot></slot></label>'
}, { shadow: true });

Vue.element('form-input', {
    props: ['type', 'value', 'id'],
    template: '<input :id="id" :type="type" :value="value">'
}, { shadow: true });

Vue.element('form-row', {
    template: '<div class="form-row"><slot></slot></div>'
}, { shadow: true });

Vue.element('ajax-form', {
	props: ['action', 'method'],
    computed: {
        formMethod: function () {
            return this.method.toUpperCase();
        }
    },
    template: '<form :action="action" :method="formMethod"><slot></slot></form>'
}, { shadow: true });

Vue.element('custom-module', {
    props: [ 'name' ],
    computed: {
    	cls: function () {
             return 'module-'  + this.name;
        }
    },
    template: '<div :class="cls"><slot></slot></div>'
}, { shadow: true });