Vue3 Simple Dialog

Vue3-simple-dialog is very simple and light-weight mode library for vue3.

I was based on vue3, typescript and composition API with <setup>.

Setup

npm i @devsun/vue3-simple-dialog

And dependencies to your main.ts:

import Vue3SimpleDialog from '@devsun/vue3-simple-dialog';
// style
import '@devsun/vue3-simple-dialog/style.css';

const app = createApp({...});
app.use(Vue3SimpleDialog);

Usage

use Composition API style:

const $dialog = inject('$dialog');

$dialog.alert('Hello, vue3-simple-dialog! 🚀');
$dialog.confirm('It is very simple');

with Typescript:

import { IDialog } from '@devsun/vue3-simple-dialog';

const $dialog = inject('$dialog');
...

Promise

alert:

$dialog.alert('Hello, there!').then(() => {
  // when you click the OK button
  console.log('OK!');
});

confirm:

$dialog
  .confirm('Are you OK?')
  .then(() => {
    // when you click the OK button
    console.log('OK!');
  })
  .catch(() => {
    // when you click the Cancel button
    console.error('Cancel');
  });

Options

use options:

$dialog.alert('Have a nice day!', {
  title: 'Hello',
  clickToClose: true,
});

See below for more options.

Properties

Options

| Name | Type | Default | Description | | ----------------- | ------- | -------- | ------------------------------------ | | title | String | 'Alert' | | | okButtonText | String | 'OK' | | | okButtonClass | String | | | | cancelButtonText | String | 'Cancel' | | | cancelButtonClass | String | | | | clickToClose | Boolean | true | close dialog when you click backdrop |

API

alert

$dialog.alert('Hello, there!').then(() => {
  // when you click the OK button
  console.log('OK!');
});

confirm

$dialog
  .confirm('Are you OK?')
  .then(() => {
    // when you click the OK button
    console.log('OK!');
  })
  .catch(() => {
    // when you click the Cancel button
    console.error('Cancel');
  });

Plugin Options

Configure the plugin using an global options:

app.use(Vue3SimpleModal, {
  // provide / inject with this key.
  key: '$dialog',

  // title of alert dialog
  alertTitle: 'Alert',

  // title of confirm dialog
  confirmTitle: 'Confirm',

  // button customizing
  okButtonText: 'OK',
  okButtonClass: 'btn btn--primary',
  cancelButtonText: 'Cancel',
  cancelButtonClass: 'btn btn--sub',

  // close when clicked backdrop layer
  clickToClose: true,
});