Modal Variations in Vue3

Question

I'm trying to create a modal with different variations like AddUser or EditUser with different headers and buttons but with the same layout. I imagine it would be something like where I define in the component itself how each different type of modal will look like. am I thinking right? is it possible to do something like this? Any guides to help me?

Thank you very much

I tried to define my variants in the modal's props and wrote a function to vary my values with the variant as a parameter. but I think it's the wrong way

Answer 1

You should use Vue Component Slots in your modal component.

Like this:

<div class="modal">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>