# vue-lite-modal

> Vue3 modal dialog

Latest version **0.0.5** (published 2021-04-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-lite-modal
pnpm add vue-lite-modal
yarn add vue-lite-modal
bun add vue-lite-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-04-21 |
| First published | 2021-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @web677 |
| Maintainers | felaoli |
| Keywords | vue-lite-modal, lite-modal, modal, dialog, vue, vue3 |

## Links

- npm: https://www.npmjs.com/package/vue-lite-modal
- npm.io page: https://npm.io/package/vue-lite-modal

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [post-robot](https://npm.io/package/post-robot.md) — 93.7K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads

## Recent versions

- 0.0.5 (latest) — 2021-04-21
- 0.0.4 — 2021-04-16
- 0.0.3 — 2021-04-15
- 0.0.2 — 2021-04-15
- 0.0.1 — 2021-04-15

## README

# vue-lite-modal

Vue.js modal dialog plugin for vue 3

[vue-lite-toast](https://www.npmjs.com/package/vue-lite-toast) : Vue.js toast notification plugin for vue 3

## Installation

```bash
# npm
npm install vue-lite-modal -S
```

## Import

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

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

## Usage

```js
// 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.

```js
// 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.

```js
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)`

```js
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.txt) License

---
_Source: https://npm.io/package/vue-lite-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._