vue3-use-modal
v0.0.3
Published
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.
Downloads
116
Maintainers
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
# 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