# vuejs-overlay
> Overlay (popup) component for Vue.js
Latest version **0.0.28** (published 2020-10-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install vuejs-overlay
pnpm add vuejs-overlay
yarn add vuejs-overlay
bun add vuejs-overlay
```
## 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.28 |
| Published | 2020-10-11 |
| First published | 2019-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Fatih Koca |
| Maintainers | fattihkoca |
| Keywords | vue overlay component, vue overlay, vue popup component, vue popup |
## Links
- npm: https://www.npmjs.com/package/vuejs-overlay
- Repository: https://github.com/fattihkoca/vuejs-overlay
- Homepage: https://github.com/fattihkoca/vuejs-overlay#readme
- Issues: https://github.com/fattihkoca/vuejs-overlay/issues
- npm.io page: https://npm.io/package/vuejs-overlay
## Dependencies (1)
- [vue](https://npm.io/package/vue.md) ^2.6.10
## 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
- 0.0.28 (latest) — 2020-10-11
- 0.0.27 — 2020-10-10
- 0.0.26 — 2020-02-29
- 0.0.25 — 2020-02-29
- 0.0.24 — 2020-02-03
- 0.0.23 — 2019-12-27
- 0.0.22 — 2019-12-27
- 0.0.21 — 2019-12-09
- 0.0.2 — 2019-12-03
- 0.0.1 — 2019-12-03
## README
# vuejs-overlay
[](https://travis-ci.org/fattihkoca/vuejs-overlay)
[](https://www.npmjs.com/package/vuejs-overlay)
[](https://www.npmjs.com/package/vuejs-overlay)
`Vue.js Overlay` is a practical, modern and convenient `overlay` (`popup`) `Vue.js` component.
# What?
It is a stylish popup component for `Vue.js` that you can easily use in your projects.
The most important features are flexible, modern, animated, stable, lightweight.
# Install
```
npm install vuejs-overlay --save
```
# Usage
```html
My popup
```
```js
// ES6
import Overlay from 'vuejs-overlay';
new Vue({
el: '#app',
data() {
return {
opened: false,
visible: false
}
},
components: {
Overlay
}
});
```
---
# Configurations
You can make the configurations with `props`.
| Configuration | Type | Default | Description |
| ----------------------------------| ---------------- | ------------------------ | ------------------------------------------------------------- |
| animate | String, Boolean | false | You can choose which animation the popup will open and close. |
| backdrop | Boolean | true | Specifies whether the popup has a backdrop. |
| close-on-escape | Boolean | true | This is to close the popup with the `escape key`. |
| close-on-cancel | Boolean | true | This is to close the popup with the `cancel button`. |
| close-by-backdrop-click | Boolean | true | This is to close the popup when the backdrop is clicked. |
| closeable | Boolean | true | Closing feature of the popup. You can use it in critical form operations. |
| opened | Boolean | false | Specifies the popup is opened. |
| header | String, Boolean | false | Used to determine the header text of the popup. |
| visible | Boolean | false | Specifies that internal elements are loaded of the popup. |
#### Available `animate` options:
`"bounce"`, `"fade"`, `"slide-down"`, `"slide-left"`, `"slide-right"`, `"slide-up"`, `"zoom-in"`, `"zoom-out"`, `false`.
```html
👍
```
#### Usage asynchronously:
Let's take an example of content data with ajax. In this example we used [`vuejs-ajax`](https://github.com/fattihkoca/vuejs-ajax) library.
```html
```
```js
import ajax from "vuejs-ajax";
import {Overlay} from 'vuejs-overlay.js';
Vue.use(ajax);
new Vue({
el: '#app',
data() {
return {
opened: false,
visible: false,
text: null,
}
},
methods: {
openHandle() {
this.overlayOpened = true;
Vue.ajax.get("example.com/my-request-url").then(response => {
this.text = response.data;
this.visible = true;
});
},
onClosed() {
this.opened = false;
this.visible = false;
}
},
components: {
Overlay
}
});
```
---
# Events
| Configuration | Type | Description |
| ----------------------------------| ---------------- | ------------------------------------------------------------- |
| @closed | Callback | Triggers when the popup is closed. We recommend that you use this to ensure stable operation of this component when closing the popup. |
| @opened | Callback | Triggers when the popup is opened. |
```html
My popup
```
---
# License
[MIT](LICENSE)
Copyright (c) 2019 [Fatih Koca](http://fattih.com)
---
_Source: https://npm.io/package/vuejs-overlay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._