vue3-use-modal

🎨 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

# using npm
npm install vue3-use-modal

# using yarn
yarn add vue3-use-modal

📝 Setting in Vue3

import { ModalPlugin } from 'vue3-use-modal';

createApp(App).use(ModalPlugin).mount('#app');

📝 Setting in Nuxt3

// plugins/modalPlugin
import { ModalPlugin } from 'vue3-use-modal';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ModalPlugin);
})

// nuxt.config.js
module.exports = {
  plugins: [
    { src: '~/plugins/modalPlugin', mode: 'client' },
  ],
}

🏷 Type def

import { useModal } from 'vue3-use-modal';
// shims-vue.d.ts
declare module 'vue' {
  interface ComponentCustomProperties {
    $modal: ReturnType<useModal>
  }
}

🎩 Usage vue-use-modal

⭐️ See example here.

1> Define modal component:

<template>
  <div class="modal-bg" />
  <div class="modal-content">
    <h1>Hello vue-use-modal</h1>
    <h2>{{ myName }}</h2>
    <button @click="$emit('resolve', 'eddie')">resolve</button>
    <button @click="$emit('reject', 'error')">reject</button>
    <button @click="$emit('close')">close</button>
  <div>
</template>

emit('resolve', value)

• Type:

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

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

emit('reject', value)

• Type:

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

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

emit('close')

• Type:

type emit = ('close')

• Description: Emit name close will simply close modal.

2> useModal:

<script setup lang="ts">
import { useModal } from 'vue3-use-modal';
import SimpleModal from 'components/SimpleModal.vue';

const modal = useModal();

const onClick = async () => {
  const name = await modal.addModal<string>(
    { 
      key: 'SimpleModal', 
      component: SimpleModal,
      props: { name: 'eddie' }
    });
  alert(`My name is: ${name}`);
}
</script>

OR

<script lang="ts">
import SimpleModal from 'components/SimpleModal.vue';

export default {
  methods: {
    async onClick() {
      const name = await this.$modal.addModal<string>(
        {
          key: 'SimpleModal',
          component: SimpleModal,
          props: { name: 'eddie' }
        });
      alert(`My name is: ${name}`);
    }
  },
}
</script>

modal.addModal()

• Type:

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

modal.closeModal()

• Type

type closeModal = (key: string): void;

🐛Report bug

Please report bug in issue tab with template.

🙇🏻‍️ Contribution

See CONTRIBUTION.md