Features

Installation

# npmnpm install vue-nice-modal# pnpmpnpm add vue-nice-modal

Usage

1. Wrap application with Provider

<!-- App.vue --><template><NiceModalProvider><router-view/></NiceModalProvider></template><scriptsetup>import{ProviderasNiceModalProvider}from'vue-nice-modal';</script>

2. Create modal component

<!-- my-modal.vue --><template><van-dialogshow-cancel-button:value="modal.visible.value":close-on-click-overlay="false":title="title":message="content"@closed="modal.remove"@confirm="handleConfirm"@cancel="handleCancel"/></template><scriptsetup>import{useModal}from'vue-nice-modal';constmodal=useModal();defineProps(['title','content']);consthandleCancel=()=>{modal.reject('cancel');modal.hide();};consthandleConfirm=()=>{modal.resolve('confirm');modal.hide();};</script>

<!-- my-modal.vue --><template><el-dialog:title="title":visible="modal.visible.value"append-to-body@closed="modal.remove"><span>{{ content }}</span><spanslot="footer"class="dialog-footer"><el-button@click="handleCancel">Cancel</el-button><el-buttontype="primary"@click="handleConfirm">Confirm</el-button></span></el-dialog></template>

// my-modal.jsimportNiceModalfrom'vue-nice-modal';import_MyModalfrom'./my-modal.vue';exportconstMyModal=NiceModal.create(_MyModal);

3. Using modals

3.1 Basic usage - directly using component

constshowModal=async()=>{try{constres=awaitNiceModal.show(MyModal,{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};

3.2 Declarative usage - referencing declared modal via ID

<template><MyModalid="my-modal"/></template><scriptsetup>constshowModal=async()=>{try{constres=awaitNiceModal.show('my-modal',{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};</script>

3.3 Hook usage - using useModal composition API

constmodal=NiceModal.useModal(MyModal);constshowModal=async()=>{try{constres=awaitmodal.show({title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};

3.4 Registration usage - using ID after registration

// Pre-register modalNiceModal.register('register-modal',MyModal);constshowModal=async()=>{try{constres=awaitNiceModal.show('register-modal',{title:'Title',content:'Content',});console.log('Result:',res);}catch(error){console.log('Cancelled:',error);}};

API Reference

Components

NiceModal.Provider

NiceModal.create(Component)

Methods

show(modalId, args?)

hide(modalId)

remove(modalId)

register(id, component, props?)

unregister(id)

Hook

useModal(modal?, args?)

Type Support

Build Output

dist/  ├── esm/# ES Module format  └── lib/# CommonJS format

Browser Compatibility

License