Reuseable vue-modal

AppComponent.vue

<template>
    <div>
        <TestModal
            v-if="shouldShowModal"
            @close-modal='closeModal'
        />
    </div>
</template>

<script>
    
    import TestModal from "../general/TestModal";

    export default {
         
        components: {
            TestModal
        },

    }
</script>

<style scoped>

  
</style>

ModalLayout.vue

<template>
    <div class="modal fade" style="display: block; opacity:1" @click="closeModal">
        <div class="modal-dialog">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <slot name="header">
                        Default header
                    </slot>
                    <button type="button" class="close">
                        <span @click="closeModal">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <slot name="body">
                        Default body
                    </slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer">
                        Default footer
                    </slot>
                    <button class="btn btn-light" type="button" @click="closeModal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        methods: {
            closeModal() {
                this.$emit('close-modal');
            },

        },
        mounted() {
            // Unicode key code of the escape key that is triggered when the key is pressed
            document.addEventListener("keydown", (e) => {
                if (e.keyCode === 27) {
                    this.closeModal();
                }
            });
        },
    }
</script>

<style scoped>


</style>

TestModal.vue

<template>
    <modal @close-modal="$emit('close-modal')">
        <h5 slot="header" class="modal-title">Add Event</h5>
        <div slot="body">
            hey this is body content
        </div>

        <div slot="footer">
            <button>Hey this is footer button</button>
        </div>
    </modal>
</template>

<script>
    import Modal from "./Modal";

    export default {
        components: {
            Modal
        }
    }
</script>

<style scoped>

</style>