A VueJS Signature canvas field, using szimek/signature_pad

Signature.vue

<template>
    <div>
        <canvas ref="canvas"></canvas>

        <div class="clearfix"></div>

        <div class="btn-group">
            <button @click="clear" type="button" class="btn btn-default">
                <i class="fa fa-times"></i>
                Clear Signature
            </button>
        </div>
    </div>
</template>

<style>
.signature {
    border: 2px solid #cbc9c6;
    border-radius: 5px;
}
</style>

<script>
import SignaturePad from 'signature_pad';

export default {
    props: {
        value: String,
    },

    data() {
        return {
            pad: null,
        };
    },

    mounted() {
        this.pad = new SignaturePad(this.$refs.canvas, {
            onEnd: () => {
                this.$emit('input', this.pad.toDataURL());
            }
        });
    },

    methods: {
        clear() {
            this.pad.clear();

            this.$emit('input', this.pad.toDataURL());
        },
    }
}
</script>

Awesome, thanks for sharing @agm1984! 🙏