Vue-global-modal NPM

vue-global-modal

The vue global modal based on global emitter of npm package vue-happy-bus.

Why This?

Easy to use Just a few steps, no complicated setup required.
Only logic & No style Focus on implementing the logic of components, no any default styles.

Usage

First Step

Define your modal and put into vue-global-modal:

<!-- ExampleModal.vue -->

<template>
  <GlobalModal name="test" v-slot="{ onConfirm, onCancel }">
    <button class="btn-confirm" @click="onConfirm">OK</button>
    <button class="btn-cancel" @click="onCancel">Cancel</button>
  </GlobalModal>
</template>

<script setup>
  import GlobalModal from "vue-plugin-modal";
</script>

Second Step

import and call $emit anywhere you need:

<script setup>
  import { $emit } from "vue-plugin-modal";

  const emitFromApp = () => {
    $emit("Alert", {
      onConfirm: () => {
        console.log("data saved!!");
      },
    });
  };
</script>

<template>
  <div>
    ...
    <div>
      <!-- something deep in the components -->
      <button @click="emitFromApp">emit!</button>
    </div>
    ...
  </div>
</template>

Properties

name
type: String default: "globalModal" description: Event name for emit.
classOnShow
type: String default: "" description: class names apply when modal showed.
classOnHide
type: String default: "" description: class names apply when modal hided.
styleOnShow
type: Object default: {} description: styles apply when modal showed.
styleOnShow
type: Object default: {} description: styles apply when modal hided.
showLogs
type: Boolean default: false description: Whether to display the console log when the event is triggered.