Vue reusable dialog

Question

I have no idea how to make reusable modal in vue. So, my idea is - I have global plugin which add global method $modal to Vue, I have base template ModalBase.vue with header, footer parts.

ModalBase.vue

<template>
    <div>
        <slot name="modal-header"/>
        <slot name="modal-footer"/>
    </div>
</template>

From next code

import MyModal from 'MyModal.vue'
mounted () {
    this.$modal.open(MyModal, someData, modalOptions)
}

I need to get new combined modal window from merging ModalBase.vue and MyModal.vue . MyModal.vue template need to be placed between ModalBase header and footer. If MyModal already has a footer or header part, it will overwrite same ModalBase parts. All logic and someData mutations must be placed in MyModal.vue . So in my case ModalBase like boilerplate for modal window.

Maybe there is more simple solution to achieve this.

Answer 1

It sounds like you want to use components. Check the docs and it may help. Basically you can put a component in a component as I think you want and then use the parent component in a page somewhere. It might start getting a bit messy if you want to replace part of a component if a child component is present and I honestly wouldn't know how to do that, perhaps someone else would.

Layering components like this can make it more difficult if you are trying to pass data between them so you need to be careful of that.

Also, your template code above would likely not work because as the error would tell you "Component template should contain exactly one root element." So you'd need:

<template>
  <div>
    <slot name="modal-header"/>
    <slot name="modal-footer"/>
  </div>
</template>