vue-pro-modal v1.0.18

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

Components

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

VModal

The main component for creating a modal window

Props

You can also specify props from options

slots

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

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

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

slots

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>