Reusable Modal component supports own custom HTML and classes

Vue Modal

Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content / buttons.

Installation

npm i @melmacaluso/vue-modal

Usage

Simply import it in your desired vue component as follows:

import Modal from "@melmacaluso/vue-modal";

Props

Prop	Type	Comment
btnText	String	Text label for modal button
modalContent	String	Pass here your html for the modal main modal
closeBtn	Boolean	Conditionally add a close button
closeBtn-content	String	Pass here your html for the close button
inception	Boolean	Allow multiple buttons/content within the modal
modals	Array	Pass here an array of objects, they retain the same props within the array's scope ie. <scope>.btnText
showNav	Boolean	Conditionally show a navigation within the Modal's contents
@before-open	Boolean	Attach here your custom function, it will be invoked before the modal opens
@before-close	Boolean	Attach here your custom function, it will be invoked before the modal closes

Example (inline HTML):

<Modal
  btnText="Press me, senpai ?"
  modalContent="
        <div>
          <h2> Hello I am a modal</h2>
          <p>I like stating the obvious: <b>the obvious</b></p>
          <p>Now, try this trick: <code>Ctrl + Shift + W </code> ?</p>
        </div>
        "
  :closeBtn="true"
  closeBtn-content="
        <span>X</span>
        "
/>

Example (Passing component):

<Modal
  btnText="Press me, senpai ?"
  :closeBtn="true"
  closeBtnHTML="<span>X</span>"
>
  <ExampleComponent/>
</Modal>

Example (multiple buttons & modal content) + custom functions:

<Modal
  :inception="true"
  @before-open="yourOpenFn()"
  @before-close="yourCloseFn()"
  :modals="[
    {
      btnText: 'Press me 1',
      modalContent: 'This is <strong>the</strong> content 1'
    },
    {
      btnText: 'Press me 2',
      modalContent:
        '<img src=\'https://media.giphy.com/media/5exwXWg9u7yow/giphy.gif\'>'
    },
    {
      btnText: 'Press me 3',
      modalContent: 'This is the <h3>content 3</h3>'
    }
  ]"
  :showNav="true"
/>

GitHub