@exapps/vue-flexi-modal

VueFlexiModal

VueFlexiModal is a highly versatile and customizable modal component for Vue 3 applications. It offers a powerful combination of dynamic content loading, easy integration, and flexible customization options. Designed to cater to a wide range of modal use cases, VueFlexiModal simplifies the process of adding modals to your Vue projects, enhancing user interaction with minimal development effort.

Features

• Dynamic Content Loading: Load content dynamically into the modal with the useFlexiModal script, allowing for a highly flexible and responsive user experience.
• Easy Integration: Utilize the VueFlexiModalButton component to seamlessly integrate modals into your application. Simply pass the component you wish to display as a prop to the ModalButton, and VueFlexiModal handles the rest.
• Customizable: Tailor the look and feel of your modals to fit your application's theme and requirements, ensuring a consistent and engaging user interface.

Usage

Installing VueFlexiModal

To get started with VueFlexiModal, first install the package in your Vue project:

npm install @exapps/vue-flexi-modal --save

Using VueFlexiModal

import { VueFlexiModal, VueFlexiModalButton, VueFlexiModalContainer } from '@exapps/vue-flexi-modal';

Layout

<VueFlexiModalContainer />

Button use

import ModalContentComponent from './ModalContentComponent.vue';

<VueFlexiModalButton :component="ModalContentComponent" :props="{ type: 'test' }">
    Open Modal
</VueFlexiModalButton>

Modal component use

<VueFlexiModal>
    <template #trigger>
        <button>Open Modal</button>
    </template>
    
    My Content
</VueFlexiModal>

useFlexiModal script usage

import { useFlexiModal } from '@exapps/vue-flexi-modal';

const { openModal } = useFlexiModal();

openModal(ModalContentComponent, { type: 'test' });