🎨 vue3-use-modal

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal. It is not only component based but also lets using modal either asynchronous or synchronous behavior.

🚨 Caution: vue3-use-modal is not compatitable with vue2.

🛠 Installation

1# using npm
2npm install vue3-use-modal
3
4# using yarn
5yarn add vue3-use-modal

📝 Setting in Vue3

1import { ModalPlugin } from 'vue3-use-modal';
2
3createApp(App).use(ModalPlugin).mount('#app');

📝 Setting in Nuxt3

1// plugins/modalPlugin
2import { ModalPlugin } from 'vue3-use-modal';
3
4export default defineNuxtPlugin((nuxtApp) => {
5  nuxtApp.vueApp.use(ModalPlugin);
6})

1// nuxt.config.js
2module.exports = {
3  plugins: [
4    { src: '~/plugins/modalPlugin', mode: 'client' },
5  ],
6}

🏷 Type def

1import { useModal } from 'vue3-use-modal';
2// shims-vue.d.ts
3declare module 'vue' {
4  interface ComponentCustomProperties {
5    $modal: ReturnType<useModal>
6  }
7}

🎩 Usage vue-use-modal

⭐️ See example here.

1> Define modal component:

1<template>
2  <div class="modal-bg" />
3  <div class="modal-content">
4    <h1>Hello vue-use-modal</h1>
5    <h2>{{ myName }}</h2>
6    <button @click="$emit('resolve', 'eddie')">resolve</button>
7    <button @click="$emit('reject', 'error')">reject</button>
8    <button @click="$emit('close')">close</button>
9  <div>
10</template>

emit('resolve', value)

• Type:

1type emit = ('resolve', value: any): void

• Description: Emit name resolve will resolve with the value.

emit('reject', value)

• Type:

1type emit = ('reject', value: any): void

• Description: Emit name reject will reject with the value.

emit('close')

• Type:

1type emit = ('close')

• Description: Emit name close will simply close modal.

2> useModal:

1<script setup lang="ts">
2import { useModal } from 'vue3-use-modal';
3import SimpleModal from 'components/SimpleModal.vue';
4
5const modal = useModal();
6
7const onClick = async () => {
8  const name = await modal.addModal<string>(
9    { 
10      key: 'SimpleModal', 
11      component: SimpleModal,
12      props: { name: 'eddie' }
13    });
14  alert(`My name is: ${name}`);
15}
16</script>

OR

1<script lang="ts">
2import SimpleModal from 'components/SimpleModal.vue';
3
4export default {
5  methods: {
6    async onClick() {
7      const name = await this.$modal.addModal<string>(
8        {
9          key: 'SimpleModal',
10          component: SimpleModal,
11          props: { name: 'eddie' }
12        });
13      alert(`My name is: ${name}`);
14    }
15  },
16}
17</script>

modal.addModal()

• Type:

1type addModal<T> = ({ key: string, component: import('vue').Component, props?: unknown }): Promise<T>;

modal.closeModal()

• Type

1type closeModal = (key: string): void;

🐛Report bug

Please report bug in issue tab with template.

🙇🏻‍️ Contribution

See CONTRIBUTION.md