Global dialog implementation with vue

Question

I am need a reusable, global dialog/modal component in my vue application. I need to be able to call it from any component and update its header text, body text and callback function once the dismiss button is pressed on the modal. I have tried importing a custom made dialog component into each component where I plan to use it and I have tried creating a global dialog where the values would be set using a mutable values in a modals vuex modal. This latter did not work because vuex will not store functions as values. I am new to vue and am not too sure how to go about this and absolutely any advice on a good way to go about it would help tremendously.

Answer 1

I did something like that before. The main ingredient is the handling of events through the $root because you can't relay in this scenario on the normal component communication.

// In your Global Modal
<script>
export default {
    name: 'GlobalModal',
    mounted () {
        this.$root.$on('callGlobalModal', () => {
            this.dialog = true
        })
    },
    data: () => ({
        dialog: false,
    }),
}
</script>

Then call it frome anywhere using this.$root.$emit('callGlobalModal')