Simple Modal Component For Vue 3 – Jenesius

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:

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

Add Comment