jenesius-vue-modal

Jenesius Vue Modal

Jenesius vue modal is simple library for Vue 3 only.

---

For add modals in your project you need to put the modal's container in the App component:

<template>
    <widget-container-modal />

</template>
<script>
    import {container} from "jenesius-vue-modal";
    
    export default {
        components: {WidgetContainerModal: container},
        name: "App"
    }
</script>

OpenModal

    import {openModal} from "jenesius-vue-modal";

    openModal(VueComponent, props);

or

    import useModal from "jenesius-vue-modal";

    export default{
        setup(){
            const {openModal} = useModal();
            openModal(VueComponent, props);
        }
    }

Methods

Function name	Description
openModal(VueComponent, props)	Close any other modals and then open provided modal
closeModal()	Close all modals
pushModal(VuewComponent, props)	Add on top modal component
popModal()	Close the last modal component

Example VueModalComponent

WidgeTestModal.vue

    <template>
        <p>{{title}}</p>
    </template>
    <script>
        export default {
        	props: {
        		title: String
            }
        }
    </script>

For show this component

    import useModal from "jenesius-vue-modal"
    import WidgeTestModal from "WidgeTestModal.vue";

    const {openModal} = useModal();

    openModal(WidgeTestModal, {
        title: "Hello World!"
    });