https://github.com/eddie0329/vue3-use-modal

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal.
https://github.com/eddie0329/vue3-use-modal

dialog dialog-plugin modal modal-plugin usedialog usemodal vue-plugin vue3-hooks

Last synced: 12 months ago
JSON representation

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal.

• Host: GitHub
• URL: https://github.com/eddie0329/vue3-use-modal
• Owner: eddie0329
• License: mit
• Created: 2022-02-15T11:57:47.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-07-05T12:16:10.000Z (almost 4 years ago)
• Last Synced: 2025-05-19T17:41:56.821Z (about 1 year ago)
• Topics: dialog, dialog-plugin, modal, modal-plugin, usedialog, usemodal, vue-plugin, vue3-hooks
• Language: Vue
• Homepage:
• Size: 682 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          


  





  

  

  

  

  






## 🎨 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

```shell

# using npm

npm install vue3-use-modal

# using yarn

yarn add vue3-use-modal

```

## 📝 Setting in Vue3 

```javascript

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

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

```

## 📝 Setting in Nuxt3

```javascript

// plugins/modalPlugin

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

export default defineNuxtPlugin((nuxtApp) => {

  nuxtApp.vueApp.use(ModalPlugin);

})

```

```javascript

// nuxt.config.js

module.exports = {

  plugins: [

    { src: '~/plugins/modalPlugin', mode: 'client' },

  ],

}

```

## 🏷 Type def

```typescript

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

// shims-vue.d.ts

declare module 'vue' {

  interface ComponentCustomProperties {

    $modal: ReturnType

  }

}

```

## 🎩 Usage vue-use-modal

#### ⭐️ See example [here](https://stackblitz.com/edit/vue-w6xg5y?file=src%2FApp.vue).

### 1> Define modal component:

```html

  


  


    
Hello vue-use-modal

    
{{ myName }}

    resolve

    reject

    close

  


```

#### emit('resolve', value)

- Type:

``` typescript

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

```

- Description: Emit name `resolve` will resolve with the value.

#### emit('reject', value)

- Type:

``` typescript

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

```

- Description: Emit name `reject` will reject with the value.

#### emit('close')

- Type:

```typescript

type emit = ('close')

```

- Description: Emit name `close` will simply close modal.

### 2> useModal:

```html

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}`);

}

```

OR

```html

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}`);

    }

  },

}

```

#### modal.addModal()

- Type:

```typescript

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

```

#### modal.closeModal()

- Type

```typescript

type closeModal = (key: string): void;

```

## 🐛Report bug

Please report bug in issue tab with template.

## 🙇🏻‍️ Contribution

See [CONTRIBUTION.md](https://github.com/eddie0329/vue3-use-modal/blob/main/.github/CONTRIBUTING.md)