Reusable Modal component, supports own custom HTML, text and classes.

Overview

Vue Modal 🖼

npm semantic-release CircleCI (all branches) Commitizen friendly

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

Intro

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

What this ISN'T

This component is not meant to be a bootstrap-ish already-styled-modal-replacer for Vue.

What this IS

Instead: it wants to take it a step further: it gives you a skeleton base structure where you are free to apply your own css styling according to your requirements/website and gives you freedom of formatting the content/arrows/buttons/events as you wish with little to no effort.

Features

  • Animated modal transition
  • Overlay on modal background
  • Custom event triggering on before-close and before-open
  • Conditional: Next/prev arrows, close button, paging
  • Next and prev arrow for switching between modal contents
  • Modal contents navigation with custom paging
  • CSS/HTML customisation of: prev/next arrows, modal content, modal navigation, modal trigger button/s

Demo

Vue modal animated demo

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
multiple 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 with each modal's btnText
showArrows Boolean Conditionally show an arrow based navigation
showArrowsCloseBtn Boolean Conditionally show an the close button between the prev/next arrows, it inherits closeBtn-content
arrowNextContent String Pass here your html for the next arrow
arrowPrevContent String Pass here your html for the previous arrow
@before-open Function Attach here your custom function, it will be invoked before the modal opens
@before-close Function Attach here your custom function, it will be invoked before the modal closes

Examples

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>
        "
/>

Passing component:

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

Multiple buttons & modal content + custom functions:

<Modal
  :multiple="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"
/>

From Api/Json feed + Prev/Next Arrows:

<Modal
  :multiple="true"
  :modals="formattedUsers"
  :showArrows="true"
/>

export default {
  data: () => {
    return {
      users: []
    }
  },
  mounted(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(res => this.users = res)
      .catch(err => console.log(err))
  },
  computed: {
    formattedUsers: function() {
      return this.users.map(user => {
        return {
          btnText: `${user.name}`,
          modalContent: `
            <h2>Email:${user.email}</h2>
            <h2>Phone:${user.phone}</h2>
          `
        };
      });
    }
  }
}
Issues
  • How do you customize or change the modal button ? How to call a function on modal button click ?

    How do you customize or change the modal button ? How to call a function on modal button click ?

    I am trying to figure out how to customize the modal button.

    I know we can change how it looks by using the CSS tag button, but I would like to add much more it.

    This is what I would like to have instead of the default button.

    <span @click.prevent="editFile(file.id)">
        <i class="far fa-edit"></i>
    </span>
    

    I have tried using template literals like this:

        <Modal btnText=`<span @click.prevent="editFile(file.id)">
                        <i class="far fa-edit"></i>
                      </span>`
                :closeBtn="true"
                closeBtnContent="<span>X</span>"
        >
          <Component/>
        </Modal>
    

    but it obviously did not work.

    How can we customize the button that opens the modal ?

    opened by GeorgeFlorian 0
Releases(v2.1.0)
Owner
Mel Macaluso
Fullstack dev, from Sicily with love.
Mel Macaluso
Vue.js component for accessible modals

vue-accessible-modal Vue.js component for accessible modals. vue-accessible-modal Features Demo Installation Via NPM Via Yarn Initialization As a plug

Andrew 16 Aug 20, 2021
Jenesius vue modal is simple library for Vue 3 only

Jenesius vue modal is simple library for Vue 3 only

Архипцев Евгений 23 Sep 23, 2021
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

??Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final 272 Oct 14, 2021
Reusable Modal component, supports own custom HTML, text and classes.

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

Mel Macaluso 28 Sep 9, 2021
Simple and intuitive, highly customizable modal component for Vue.js.

Transform Vue.js 2.0+ component into modal with powerful layout and transition support

Yuqiao Chen 9 Sep 23, 2021
Vue modals with a single component

Vuedals VueJS (2.x) Plugin for multiple modals windows with a single component instance. DEMO View demo on jsFiddle What is this? A plugin to open sto

Javis V. Pérez 102 Sep 15, 2021
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

David Desmaisons 44 Aug 29, 2020
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

David Desmaisons 44 Aug 29, 2020
Bootstrap style modal for vue

vue-bootstrap-modal Bootstrap style modal component for vue. Usage import Bootstrap.css <link href="bootstrap.css"></link> NOTE: By default, the moda

岛书 151 Jun 9, 2021
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition

vue-ya-semantic-modal Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition This component only provide a frame

null 21 Apr 23, 2021
modal component for vuejs

vue-modaltor Changelog All notable changes to this project will be documented in this file. vue modal component for vuejs and i hope it be useful for

Davod Aslani Fakor 80 Oct 18, 2021
Vue component for creating modal windows using Tailwind CSS.

Vue component for creating modal windows using Tailwind CSS.

Отраслевой Центр Разработки и Внедрения 3 Apr 1, 2021
Modal component for Vue

vue-modal A modal window component for Vue vue-modal is designed with web applications in mind and tries to stick as much as possible to the accessibi

Giannis Koutsaftakis 52 Oct 7, 2021
Easy to use, highly customizable Vue.js modal library.

Vue.js modal Easy to use, highly customizable Vue.js modal library. ?? Examples ?? Documentation ?? Changelog ?? Looking for maintainers ?? Sponsorshi

Yev Vlasenko 4k Oct 15, 2021
Modal window for vue.js

Vudal Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent) Install plugin import { VudalPl

Egor Vakhrushev 37 Jun 28, 2021
Promisify dialogs in Vue!

Guide & Demo | 2.x docs | 1.x docs Introduction Promisify dialogs! A typical and essential type of user interaction is dialogs. Dialogs are somehow si

Jingkun Hua 272 Sep 30, 2021
Vue stackable modal component by Innologica

Stackable modal Stackable modal is a library for modal dialogs which can be stacked by using z-index position. The component uses bootstrap for stylin

Innologica Ltd 36 Sep 8, 2021
vue fullpage modal

vue fullpage modal

medistream 13 Sep 24, 2021
Bootstrap Modal on Vue component

BootstrapVueModal Bootstrap Modal with Vue component It's a vue component of Bootstrap Modal. Include a slots, that you can override them and write yo

null 5 Oct 7, 2020