Home
Modal & Popup
Simple Modal Component For Vue 3 – Jenesius

Simple Modal Component For Vue 3 – Jenesius

Jenesius First listed on March 2, 2024
Live Demo Download Source Code

Install & Download:

# NPM
$ npm i jenesius-vue-modal --save

Description:

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:

Simple Modal Component For Vue 3 - Jenesius

Changelog:

v1.11.1 (03/02/2024)

  • Bugfixes

v1.11.0 (02/02/2024)

  • add isPrompted semaphore
  • add new event listener ondestroy
  • add onclose handler for prompt-modal
  • update event handler
  • add closing handlers with prompt modal
  • update label of library

11/21/2023

  • v1.10.3: feat: update event handler

11/14/2023

  • v1.10.2: rename disableInitializationCheck to skipInitCheck

11/13/2023

  • v1.10.1: add options disableInitializationCheck

11/13/2023

  • v1.10.0: namespaceQueue moved from ref to reactive; bugfixes

11/04/2023

  • v1.9.3: Adding catch for close by ESC.

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

Add Comment