@exapps/vue-flexi-modal
v1.0.8
Published
VueFlexiModal is a versatile Vue 3 modal component, featuring dynamic content loading via a useFlexiModal script and an intuitive VueFlexiModalButton for seamless integration and effortless customization.
Downloads
13
Readme
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' });