Vue 3 Dialog Box

A simple and customisable dialog box plugin for vue 3

Installation

1npm install vue3-dialog

Add plugin

1import { createApp } from 'vue';
2import App from './App.vue';
3import Dialog from 'vue3-dialog';
4
5createApp(App)
6.use(Dialog, {
7    //...options (not required)
8})
9.mount('#app');

Available options

An object with these attributes can be passed to the plugin on install in your main.js file or when calling the plugin methods in a component

Attribute	Type	Default	Description
message	String	Hello World!	The message prompted to the user
buttons	String Array	['cancel', 'confirm']	List of buttons for the user to use as a reply
presets	Object	{}	Preset dialog boxes with their own buttons and message
preset	String	--	The preset to use, defined in the presets option
callbacks	Object	{}	Set each key as a button name and the value as a function. The function will be run when the corresponding button is clicked
wrapperClass	String	__dialog-wrapper	Class for wrapper div that darkens the screen when the dialog box is shown
boxClass	String	__dialog-box	Class for main dialog box div
messageClass	String	__dialog-message	Class for message div
buttonsClass	String	__dialog-buttons	Class for div that holds the buttons
css	Object	{ default: true, wrapper: true, darken: 0.6 }	This option is only read when first installed css.default determines if default styles should be applied. wrapper.default determines if the wrapper class styles should be applied. css.darken determines what percentage to darken behind the dialog box

Options set in main.js are saved as a global property that can be editted later

This object can be accessed by injection:

1import { inject } from 'vue';
2
3const options = inject('$dialogOptions');
4
5options.presets.delete = {
6    message: 'Delete?',
7    buttons: ['cancel', 'delete']
8}

Directly in the template:

1<button @click="$dialogOptions.message = 'Changed!'">Click Me!</button>

Or directly in the script with the options API:

1export default {
2    mounted() {
3        this.$dialogOptions.presets.delete = {
4            message: 'Delete?',
5            buttons: ['cancel', 'delete']
6        }
7    }
8}

Buttons

The buttons options can optionally be passed as an object in this format:

1{
2    buttons: {
3        cancel: {
4            text: 'Cancel',
5            class: '__dialog-button-cancel __dialog-button'
6        },
7        confirm: {
8            text: 'Confirm',
9            class: '__dialog-button-confirm __dialog-button'
10        }
11    }
12}

The text attribute is the text that will appear in the button
The class attribute is a class name that will be applied to the button
The values shown are are the default values when none is provided

This object will create the same results as the object above:

1{
2    buttons: ['cancel', 'confirm']
3}

Callbacks

Any options passed in that is not listed above will be treated as a callback
It will be added to the callbacks option if its value is a function with no arguments

For example,

1{
2    buttons: ['delete', 'cancel'],
3    callbacks: {
4        delete: () => {
5            //some function
6        }
7    }
8}

Is the same as :

1{
2    buttons: ['delete', 'cancel'],
3    delete: () => {
4        //some function
5    }
6}

Usage

In your main.js you should set the default or fallback options for the dialog box along with your presets
In your components you then only need to specify the preset name along with the callback functions

For example:

main.js:

1app.use(Dialog, {
2    message: 'Are you sure?',
3    buttons: {
4        yes: {
5            text: 'Yes',
6            class: 'my-yes-button-class'
7        },
8        no: {}
9    },
10    presets: {
11        remove: {
12            message: 'Do you want to delete this?',
13            buttons: ['cancel', 'remove']
14        }
15    },
16    boxClass: 'my-box-class',
17    css: {
18        darken: 0.9
19    }
20})

The default 'no' button's details will automatically be filled in as:

1{
2    no: {
3        text: 'No',
4        class: '__dialog-button-no __dialog-button'
5    }
6}

'cancel' and 'remove' buttons are filled in similarly

In a component file:

1<button v-dialog="{ yes: myYesFunction }">Button One</button>
2<button v-dialog:remove="{ cancel: myCancelFunction, remove: myRemoveFunction }">Button Two</button>

Directive

The v-dialog directive can be applied to an element to replace @click

1<button v-dialog="{
2    message: 'Are you sure?'
3    buttons: ['yes', 'no'],
4    yes: () => {/*some function*/},
5    no: () => {/*some function*/}
6}">
7Click Me!
8</button>

When this button is clicked a dialog box will appear with the message Are you sure? and a yes and no button. The dialog box will disapear after these are pressed

When using the directive the preset name can be passed in as the directive argument
This:

1<button v-dialog:confirm>Click Me!</button>

Is equivalent to:

1<button v-dialog="{ preset: 'confirm' }">Click Me!</button>

Provide / Inject

The $dialog method is provided for use with the composition API

1import { inject } from 'vue';
2
3const dialog = inject('$dialog');
4
5dialog({
6    message: 'Are you sure?',
7    buttons: ['yes', 'no'],
8    yes: () => {/*some function*/},
9    no: () => {/*some function*/}
10});

Global Property

The $dialog method is available in the template to activate a dialog box

1<button @click="$dialog({
2    message: 'Are you sure?',
3    buttons: ['yes', 'no'],
4    yes: () => {/*some function*/},
5    no: () => {/*some function*/}
6})">
7Click Me!
8</button>

Or in the script when using the options API

1export default {
2    methods: {
3        activateDialog() {
4            this.$dialog({
5                message: 'Are you sure?',
6                buttons: ['yes', 'no'],
7                yes: () => {/*some function*/},
8                no: () => {/*some function*/}
9            })
10        }
11    }
12}