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.

@Reiner yes i have seen the documentation for creating a modal. This does not solve my issue of making this a truly reusable global modal — colin rickels
Use slots to make it reusable or use one of the many librarys from npm, who do the same. — Reiner

Hexodus Hexodus · Accepted Answer · 2020-08-17T10:29:24

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')

Global dialog implementation with vue

1 Answers