Vue pro modal

Vue plugin for creating modal windows. It can be used both in traditional style and programmatically.

Installation

$ npm i vue-pro-modal

Nuxt

// nuxt.config.js
export default {
    ...
    modules: [
        'vue-pro-modal/nuxt',
    ],
};

Create modal component in the «components» directory and add VModalTarget component to main component.

Usage (programmatically)

import Vue from 'vue';
import VueModal from 'vue-pro-modal';
import 'vue-pro-modal/dist/vue-pro-modal.css';

const options = {
  import: (name) => import(`@/components/${name}.vue`),
};

Vue.use(VueModal, options);

Create modal component in the «components» directory:

// components/Modal.vue
<template>
    <v-modal>
        content
    </v-modal>
</template>

Add target component in root app:

// App.vue
<template>
    <div>
        <div>
            <router-view />
        </div>

        <v-modal-target />
    </div>
</template>

Calling modal:

export default {
    methods: {
        open() {
            this.$modal.open('Modal');
        },
    },
};

More about calling modals programmatically:

The programmatic call of modals dynamically load components from the directory specified in the import option. The import option is required. Installing the plugin connects the components globally, and also adds the $modal property, which has the following properties and methods:

$modal.$store - state of modals:

[
    {
        id: string,
        name: string,
        props: object,
        listeners: object,
        eventBus: object
    }
]

$modal.open - Method for calling modals. Returns a promise that is resolved when the opening animation ends.

/**
 * @param {String} name - name or namespace of component.
 * @param {Object} props - props of component.
 * @param {Object} listeners - event listeners of component.
 *
 * @returns {Promise}
 */
this.$modal.open(name, props, listeners).then(() => {
    console.log('opened');
});

$modal.close - Method for closing modals. Returns a promise that is resolved when the closing animation ends.

/**
 * An modal can be found by name, id, or index.
 * If no argument is passed function will close the last modal.
 *
 * @param {String|Number} name
 *
 * @returns {Promise}
 */
this.$modal.open(name, props, listeners).then(() => {
    console.log('opened');
});

$modal.closeAll - Method for closing all modals.

Usage (v-model)

import 'vue-pro-modal/dist/vue-pro-modal.css';

<template>
    <div>
        <button v-on:click="modal = true">
            show modal
        </button>

        <v-modal v-model="modal">
            content
        </v-modal>
    </div>
</template>

<script>
import { VModal } from 'vue-pro-modal';

export default {
    components: {
        VModal,
    },
    data() {
        return {
            modal: false
        };
    },
};
</script>

Options

Name | Type | Default | Description --------------------|--------------------|-----------|-------------- transition | string | 'scale' | Transition name to display modal. loadingTransition | string | 'fade' | Transition name to display modal after loading. appear | boolean | false | To apply a transition on the initial render. overlay | boolean | true | Display overlay modal. layout | boolean | true | Display background modal. fullscreen | boolean | false | Fullscreen modal. persistent | boolean | false | Persistent modal. When you click on the overlay, the modal will twitch. scrollLock | boolean | true | Body scroll lock. scrollLockGapMethod | string | 'none' | Gap method while blocking scrolling closeOnOverlay | boolean | true | Close modal on click overlay. closeOnEscape | boolean | true | Close modal on press ESC key. noPadding | boolean | false | Without paddings (.modal__container). noRadius | boolean | false | Without border-radius (.modal__container). focusableElement | string,null | null | Focus element after opening modal. zIndex | number,string | 1000 | z-index modal. import | function | — | Function for importing components

Components

The module exports components: VModal, VModalTarget, VModalContent, VModalClose

VModal

The main component for creating a modal window

Props

Name | Type | Default | Description --------------------|---------------------|-----------|-------------- value | boolean | false | Value for v-model. portal | boolean | true | Using portal. mountTo | string | 'body' | A querySelector String defining the DOM element to mount the modal to. modalClass | string,array,object | — | CSS class for .modal containerClass | string,array,object | — | CSS class for .modal__container width | string | — | Modal width maxWidth | string | — | Modal max-width height | string | — | Modal height maxHeight | string | — | Modal max-height

You can also specify props from options

slots

Name | props --------------------|------------------------------------------ loading | — default | { close } - Function to close modal

events

• before-open
• open
• after-open
• before-close
• close
• after-close

example

<template>
    <v-modal v-model="modal" persistent v-slot="{ close }" v-on:after-open="afterOpen">
        <template v-slot:loading>
            <i class="icon-loading" />
        </template>
        <h2>
            title
        </h2>
        <button v-on:click="close">
            close modal
        </button>
    </v-modal>
</template>

<script>
export default {
    data() {
        return {
            modal: false,
        };
    },
    methods: {
        afterOpen() {
            console.log('modal opened');
        },
    },
};
</script>

VModalTarget

Component target. Required to programmatically use modals.

Props

Name | Type | Default | Description --------------------|---------------------|-----------|-------------- transition | string | 'scale' | Transition name

When using programmatically, the transition must be reassigned here and not the Modal props

Or you can pass the transition through the props:

this.$modal.open('modals/Test', { transition: 'my-transition-name' })

VModalContent

Component for creating modals that have a header footer and a body. In this case, the maximum body height will be calculated using the following formula: (100vh - (header height) - (footer height) - (modal paddings)). In this case, the height of the header and footer is tracked and can change at any time.

slots

Name | props --------------------|------------------------------------------ header | — body | — footer | —

example

<tempate>
<v-modal>
    <v-modal-content>
        <template v-slot:header>
            modal header
        </template>
        <template v-slot:body>
            modal body
        </template>
        <template v-slot:footer>
            modal footer
        </template>
    </v-modal-content>
</v-modal>
</template>

VModalClose

Close button component.

Props

Name | Type | Default | Description --------------------|---------------------|-----------|-------------- tag | string | 'button' | tag name

slots

Name | props --------------------|-------------------------- default | —

slot for changing default icon (x)

example

<tempate>
<v-modal>
    <v-modal-content>
        <template v-slot:header>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    modal header
                </div>
                <div>
                    <v-modal-close />
                </div>
            </div>
        </template>
        <template v-slot:body>
            modal body
        </template>
        <template v-slot:footer>
            modal footer
        </template>
    </v-modal-content>
</v-modal>
</template>