An Easy Modal Manager For Vue – modal-provider

Install & Download:

# Yarn
$ yarn add vue-modal-provider
# NPM
$ npm i vue-modal-provider

Description:

modal-provider is a Vue component that provides an easy way to generate and manage modal windows in your app. Inspired by eBay’s nice-modal-react.

How to use it:

1. Import and register the modal-provider.

// app.vue
<script setup lang="ts">
  import { RouterView } from "vue-router";
  import { ModalProvider } from "vue-modal-provider";
</script>
<template>
  <ModalProvider>
    <RouterView />
  </ModalProvider>
</template>

2. Create a modal component.

<!-- Modal.vue -->
<template>
  <el-dialog v-model="visible">
    {{ args }}
    <el-button @click="hide(), resolve(123), remove()">close</el-button>
  </el-dialog>
</template>
<script lang="ts" setup>
import { useModalRef } from "vue-modal-provider";
const {
  // show variables
  visible,
  // close modal
  hide,
  args,
  // remove modal lose animation
  remove,
  resolve,
  reject,
} = useModalRef();
</script>

3. Show the modal.

<script lang="ts" setup>
  import { useModal } from "vue-modal-provider";
  import TestModal from "./Modal.vue";
  const { show } = useModal(TestModal);
  function showModal() {
    show("test msg").then((c) => {
      console.log(c);
    });
  }
</script>
<template>
  <el-button @click="showModal">Open The Modal</el-button>
</template>

Preview: