https://github.com/kouts/vue-modal

A customizable, stackable, and lightweight modal component for Vue.
https://github.com/kouts/vue-modal

a11y dialog drawer modal panel popup sidebar sidebar-menu sidepanel stackable vue vue-modal

Last synced: 8 months ago
JSON representation

A customizable, stackable, and lightweight modal component for Vue.

Host: GitHub
URL: https://github.com/kouts/vue-modal
Owner: kouts
License: mit
Created: 2019-10-19T14:25:46.000Z (about 6 years ago)
Default Branch: next
Last Pushed: 2024-08-29T04:21:04.000Z (over 1 year ago)
Last Synced: 2025-03-08T21:03:49.639Z (9 months ago)
Topics: a11y, dialog, drawer, modal, panel, popup, sidebar, sidebar-menu, sidepanel, stackable, vue, vue-modal
Language: Vue
Homepage: https://vue-modal-demo.netlify.app/
Size: 4.57 MB
Stars: 126
Watchers: 3
Forks: 16
Open Issues: 7
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-vue - @kouts/vue-modal - A customizable, stackable, and lightweight modal component for Vue. ` 📝 2 months ago` (UI Components [🔝](#readme))
fucking-awesome-vue - @kouts/vue-modal - A customizable, stackable and lightweight modal component that adheres to the guidelines set in WAI-ARIA Dialog (Modal) section of W3C. (Components & Libraries / UI Components)
awesome-vue - @kouts/vue-modal - A customizable, stackable and lightweight modal component that adheres to the guidelines set in WAI-ARIA Dialog (Modal) section of W3C. (Components & Libraries / UI Components)
awesome-vue - @kouts/vue-modal - A customizable, stackable and lightweight modal component that adheres to the guidelines set in WAI-ARIA Dialog (Modal) section of W3C. (Components & Libraries / UI Components)

README

# vue-modal ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg?compression=gzip) ![](coverage/badge.svg)

A customizable, stackable, and lightweight modal component for Vue.js 3.

---

:fire: **HEADS UP!** You're currently looking at vue-modal `next` branch for **Vue.js 3**.
If you're looking for a Vue.js 2 compatible version of vue-modal, [please check out the `master` branch](https://github.com/kouts/vue-modal/tree/master).

---

> vue-modal is designed with web applications in mind and tries to stick as much as possible
> to the accessibility best practices set in the [WAI-ARIA Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices/#dialog_modal) section
> of W3C.

## Features at a glance

- Lightweight, minified gzipped version is < **4kb**
- Opens and closes with a data variable using `v-model` **or** with a `name` prop and `show`/`hide` functions
- Includes sensible default styling but it's also highly customizable via user CSS classes and styles
- Override modal title and content via slots
- Modal intro and outro effects using CSS animation classes
- Exposes Component events - `before-open`, `opening`, `opened`, `before-close`, `closing`, `closed`, `update:modelValue` (close)
- Scrollable when its contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the `esc` key
- **Stackable** - Multiple modal windows on top of each other
- Ability to set initial focus on an element when the modal window opens, just set the **autofocus** attribute on an element inside the modal
- **Focus management** traps keyboard focus - tabbed navigation inside the modal window
- Ability to have unclosable modal windows
- Render on demand or stay always in DOM with "live" mode
- Modals appended to `` by default, ability to append to a custom element

## Browsers support

| [](http://godban.github.io/browsers-support-badges/)
Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
Opera |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |