# vue-modality-v3

> A really nice Vue.js modal component - Compatible with Vue.js 3

Latest version **2.0.5** (published 2026-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-modality-v3
pnpm add vue-modality-v3
yarn add vue-modality-v3
bun add vue-modality-v3
```

## Health

**Score 55/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2026-08-05 |
| First published | 2022-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Victor Pereira |
| Maintainers | ovictorpereira |
| Keywords | vue-modality, vue-modality-v3, modal, vue, vue3, vuejs, vuejs3, library, dialog |

## Links

- npm: https://www.npmjs.com/package/vue-modality-v3
- Repository: https://github.com/ovictorpereira/vue-modality-v3
- Issues: https://github.com/ovictorpereira/vue-modality-v3/issues
- npm.io page: https://npm.io/package/vue-modality-v3

## Dependencies (1)

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

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K 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
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 2.0.5 (latest) — 2026-08-05
- 2.0.4 — 2024-03-25
- 2.0.3 — 2024-03-21
- 2.0.2 — 2024-03-21
- 2.0.1 — 2024-03-21
- 2.0.0 — 2024-03-21
- 1.1.0 — 2024-03-20
- 1.0.4 — 2022-05-23
- 1.0.3 — 2022-05-23
- 1.0.2 — 2022-02-24
- 1.0.1 — 2022-02-24
- 1.0.0 — 2022-02-24

## README

# vue-modality-v3
A really nice Vue.js modal component. (**Compatible with Vue.js 3**)

#### [Demo](https://ovictorpereira.github.io/vue-modality-v3/ "Demo")

## Installation
NPM
```bash
$ npm install vue-modality-v3
``` 


Register the component globally...
```js
import { createApp } from 'vue'
import App from './App.vue'

import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
// don't forget to load the css file

createApp(App)
.component('VueModalityV3', VueModalityV3)
.mount('#app')
``` 

... or import it locally
```js
<script setup>
import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
</script>
``` 

## Usage
```html
<button @click="openMyModal()">Open</button>

<vue-modality-v3 ref="myRef" title="My Title" centered>
  body content
</vue-modality-v3>
```

```js
<script setup>
import { ref } from 'vue';

const myRef = ref(null)
const openMyModal = () => { myRef.value.open() }
</script>
```



## Available props

| Prop                             | Type             | Default                | Description              |
|--------------------------|---------------|--------------------|----------------------|
| width         |               String |    400px                   |                                             |
| centered   | Boolean           | false                    | Vertically  centered   |
| overlay    | Boolean           | false     |  |
| text-center         |               Boolean |    false                   |                                             |
| title     |         String           |     Modal                |                             |
| title-class   | String           |                        |                                           |
| hide-header     | Boolean           |      false                  |                 |
| hide-footer     | Boolean           |         false               |                 |
| ok-title     | String           |            Ok            |                  |
| ok-disabled     | Boolean           |         false               |                 |
| ok-class     | String           |                        |                 |
| ok-loading     | Boolean           |        false          |      Shows the loading icon           |
| hide-ok     | Boolean           |      false                  |       Hides the ok button          |
| cancel-title     | String           |          Cancel              |                |
| cancel-disabled     | Boolean           |         false               |                 |
| cancel-class     | String           |                        |                 |
| hide-cancel     | Boolean           |      false                  |       Hides the cancel button          |
| no-close-on-backdrop     | Boolean           |      false                  |               |
| no-close-on-esc     | Boolean           |      false                  |               |
| error     | Boolean           |      false                  |      Shows error icon         |
| success     | Boolean           |      false                  |      Shows success icon         |

## Events
| Event    |  Description |
|----------|--------------|
| open     |  When you open the modal       |
| hide     |   When you hide the modal       |
| ok        |    When the Ok button is pressed      |
| cancel        |    When the Cancel button is pressed      |

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