A flexible & responsive modal component for Vue.js 2. Looks nice and clean on all devices.

Live Demo

npm i @voerro/vue-modal --save-dev

or

npm i @voerro/vue-modal --save

Then import the component:

import { Modal, VoerroModal } from '@voerro/vue-modal';

Vue.component('modal', Modal);
window.VoerroModal = VoerroModal;

Add an empty component somewhere inside your template.

<modal></modal>

Call VoerroModal.show() from anywhere in your script/Vue code. Example call:

VoerroModal.show({
    title: 'Modal Title',
    body: 'Modal Body (HTML is supported here)',
    buttons: [
        {
            text: 'Ok',
            handler: () => {
                alert('You pressed Ok');
            }
        },
        {
            text: 'Cancel'
        }
    ]
});

You can add as many buttons as you need. When you press a button, the button's handler gets called and then the modal closes. If there's no handler, the modal will close immediately without any additional actions taking place.

To add buttons to a modal include an array of button objects. Each object can have the following properties (options):

You can fetch the modal's body via Ajax. To do so provide a bodyUrl URL instead of a body. Example:

VoerroModal.show({
    title: 'Modal Title',
    bodyUrl: 'http://example.com/add-user-modal',
    buttons: [
        {
            text: 'Submit',
            handler: () => {
                alert('Submitting the form...');
            }
        },
        {
            text: 'Cancel'
        }
    ]
});

You can have multiple inline modals. "Inline" means a modal's content is stored within the HTML code of a page. Each modal should have a unique id. See an example below.

HTML:

<modal id="inline-modal" v-cloak>
    <template slot="title">Inline Title</template>

    <div slot="body">
        This body, as well as the title, are stored directly within the HTML of your page.
    </div>

    <div slot="footer">
        You'll have to implement the buttons completely yourself, in case you need them of course.
    </div>
</modal>

<modal id="inline-modal-two" v-cloak>
    <template slot="title">Inline 2</template>

    <div slot="body">This is a different inline modal with a different id.</div>
</modal>

JS/ES:

// Show the modal with the id = 'inline-modal'
VoerroModal.show('inline-modal');

// Show the modal with the id = 'inline-modal-two'
VoerroModal.show('inline-modal-two');

You can still include an object with options (including dynamically generated buttons) in the method call.

VoerroModal.show('inline-modal', {
    buttons: [
        {
            text: 'Ok',
            handler: () => {
                alert('You pressed ok');
            }
        },
        { text: 'CLose' }
    ]
});

Note: don't delete the empty <modal></modal> component from your page if you also want to use dynamically generated modals.

This is open-sourced software licensed under the MIT license.