vue-lite-modal

vue-lite-modal

Vue.js modal dialog plugin for vue 3

vue-lite-toast : Vue.js toast notification plugin for vue 3

Installation

# npm
npm install vue-lite-modal -S

Import

// In you main.js
// ... considering that your app creation is here
import Modal from "@vue-lite-modal";

createApp(App).use(Modal).mount("#app");

Usage

// this.$modal.open({/* options */});
this.$modal.open({content: 'Hello world'});
this.$modal.alert({
    title: 'Hello world',
    confirmButtonText: 'OK!'
});
this.$modal.confirm({
    title: 'Hello world',
    content: 'Vue.js modal dialog plugin for vue 3',
    cancelButtonText: 'NO!',
    confirmButtonText: 'YES!'
}).then(( {action} ) => {
    if(action == 'confirm'){
        alert('You clicked the confirm button!')
    } else {
        alert('You clicked the cancel button!')
    }
});

Available options

The API methods accepts these options:

Attribute	Type	Default	Description
title	String	--	The Modal Dialog title, Can be empty
content	String	--	The Modal Dialog content, Can not be empty
customClass	String	--	The Override class to overwrite the style
showCancelButton	Boolean	true	If the cancel button show or not
cancelButtonText	String	Cancel	The cancel button text
confirmButtonText	String	Confirm	The confirm button text

API methods

open(options)

This is generic method, you can use this method to make any kind of modal dialog.

// Can accept a message as string and apply rest of options from defaults
this.$modal.open({content: 'Hello world'});

alert(options)

There are some proxy methods to make it more readable.

this.$modal.alert({
    title: 'Hello world',
    confirmButtonText: 'OK!'
}).then(({action}) => {
    console.log(action)
    //do some thing when the modal dialog closed
});

// it's the same as 
this.$modal.open({
    showCancelButton: false,
    title: 'Hello world',
    confirmButtonText: 'OK!'
}).then(({action}) => {
    console.log(action)
    //do some thing when the modal dialog closed
});

confirm(options)

this.$modal.confirm({
    title: 'Hello world',
    cancelButtonText: 'NO!',
    confirmButtonText: 'YES!'
}).then(({action}) => {
    if(action == 'confirm'){
        alert('You clicked the confirm button!')
        //do some thing when the modal dialog closed
    } else {
        alert('You clicked the cancel button!')
        //do some thing when the modal dialog closed
    }
});

License

MIT License