izyim/resources/assets/vue/components/common/ModalComponent.vue

<template>
    <div class="modal fade modalContainer" :class="this.effect" :data-type="this.type">
        <div class="modal-dialog" v-bind:class="[{'modal-lg': this.large}, {'modal-sm': this.small}]" >
            <div class="modal-content-wrapper">
                <div class="modal-content">
                    <div class="modal-body">
                        <slot></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'type': {
                type: String,
                required: true
            },
            'large': {
                type: Boolean,
                default: false
            },
            'small': {
                type: Boolean,
                default: false
            },
            'effect': {
                type: String,
                default: "stick-up"
            }
        },
        mounted() {
            Event.$on('closeModal', () => {
                this.closeModal();
            });
        },
        methods: {
            closeModal() {
                $(this.$el).find('.modal').modal('hide');
            }
        }
    }
</script>