Just another modal & dialog component for Vue 3 applications.
How to use it:
1. Import and add the modal component to the template.
<template> <widget-container-modal /> </template>
import {container} from "jenesius-vue-modal";
export default {
components: {WidgetContainerModal: container},
name: "App"
}
2. Launch the modal.
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);
}
}
3. More API methods.
// close all modals closeModal() // push a modal pushModal(VueComponent, props); // close the last modal popModal()
Preview:
Changelog:
09/17/2023
- v1.9.2: bugfixes
08/28/2023
- v1.9.1: update
04/10/2023
- v1.9.0: update pushModal, add string name for modal component; add new method getComponentFromStore; add type declaration for props. Add options to prompt-modal.ts
10/31/2022
- v1.8.2: Update version. Added modal to Import Object
10/29/2022
- v1.8.0: Add Prompt Modal method; Added new event for return and close prompted modal: Form.EVENT_PROMPT
08/08/2022
- v1.7.0: Resolve new EventEmitter. Add unsubscribe test for modal.on construction.
07/26/2022
- v1.6.1: Update
06/10/2022
- v1.5.2: Update
02/10/2022
- v1.5.0: modal.on(eventName: string, callback: (v:any) => void)
12/05/2021
- v1.4.7: Features: modal.target
11/29/2021
- v1.4.6: Add new param: escClose.
11/27/2021
- v1.4.0: Add TS types
08/30/2021
- v1.3.1: Add styles and animation
08/16/2021
- v1.3.0: Bugfix
Download Details:
Author: Jenesius
Live Demo: https://modal.jenesius.com/
Download Link: https://github.com/Jenesius/vue-modal/archive/refs/heads/main.zip
Official Website: https://github.com/Jenesius/vue-modal
Install & Download:
# NPM
$ npm i jenesius-vue-modal --save