# @bkwld/vue-modal

> Vue 2 modal wrapper with slotted content

Latest version **1.1.1** (published 2021-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bkwld/vue-modal
pnpm add @bkwld/vue-modal
yarn add @bkwld/vue-modal
bun add @bkwld/vue-modal
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-09-27 |
| First published | 2021-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 202.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bukwild |
| Maintainers | weotch, mattaebersold, jonjahr, isaazgarcia, brokenhd |

## Links

- npm: https://www.npmjs.com/package/@bkwld/vue-modal
- Repository: https://github.com/BKWLD/vue-modal
- Homepage: https://github.com/BKWLD/vue-modal#readme
- Issues: https://github.com/BKWLD/vue-modal/issues
- npm.io page: https://npm.io/package/@bkwld/vue-modal

## Dependencies (3)

- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^4.0.0-beta.0
- [bukwild-stylus-library](https://npm.io/package/bukwild-stylus-library.md) ^3.1.0
- [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^3.0.0

## Recent versions

- 1.1.1 (latest) — 2021-09-27

## README

# Vue Modal
A component that renders a modal window with slotted content. Includes trapped tabbing for ADA compliance

## Props
`closable`: prevent the user from closing the modal (like for an age gate)
`type`: Default is standard, which is a generic modal

## To-Do
- video 
- fix the styles, import stylus library, basic dried up styles for layout and functionality
- document trap tab for ada


## Usage

```javascript
// Add component (example in global plugins)
import 'vue-modal/index.css'
Vue.component('modal', require('vue-modal'))
```

```pug

modal(ref='modal' :closeable='false' type='standard')
	transition(name='fade')
		div
			h2 Modal Content

```

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