Jquery iCheck displays a nice looking checkboxes instead of the native html checkbox. In this snippet we will make a custom Vue component of this iCheck input.

 

 

ICheckInput.vue

<template>
    <div class="checkbox">
        <label>
            <input :type="type" ref="checkboxref" :name="name" :value="value" :checked="defaultChecked" /> <strong>{{text}}</strong>
        </label>
    </div>
</template>

<script>
export default {
    name: "ICheckInput",
    props: ["value", "text", "name", "type", "defaultChecked"],
    mounted() {
        const self = this;
        $(document).ready(function () {
            $(`input[name=${self.$refs.checkboxref.name}]`).iCheck({
                checkboxClass: 'icheckbox_square-yellow',
                radioClass: 'iradio_square-yellow',
                increaseArea: '20%'
            });

            $(document).on("ifChecked ifUnchecked", `input[name=${self.$refs.checkboxref.name}]`, function (e) {
                if(e.type === 'ifChecked') {
                    self.$emit('onChecked', e.target.value);
                } else if (e.type === 'ifUnchecked') {
                    self.$emit('onUnchecked', e.target.value);
                }
            });
        });
    }
}
</script>

This component accept several props (name, value, text, type, defaultChecked). In the mounted lifecycle hook i initialize the iCheck input using the jquery selector syntax. Refer to the library docs for more info.

The component handles emitting two custom events which are (onChecked, onUnchecked)

Usage:

<ICheckInput type="checkbox" name="accept_terms" value="1" :defaultChecked="false" text="Accept terms and conditions." v-on:onChecked="handleOncheck" v-on:onUnchecked="handleOnUncheck" />

Usage as radio button:

<ICheckInput type="radio" name="accept_terms" value="1" text="Accept terms and conditions." />