# Vue Final Modal

<p align="center"><a href="https://vue-final-modal.org" target="_blank" rel="noopener noreferrer"><img src="https://vue-final-modal.org/preview.png" alt="Vue Final Modal Logo"></a></p>

<p align="center">
  <a href="https://npmcharts.com/compare/vue-final-modal?minimal=true"><img src="https://badgen.net/npm/dm/vue-final-modal" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://img.shields.io/npm/l/vue-final-modal.svg?sanitize=true" alt="License"></a>
  <a href="https://app.netlify.com/sites/vue-final-modal/deploys"><img src="https://api.netlify.com/api/v1/badges/444b13a8-540f-4438-94da-80c865c8f103/deploy-status" alt="Netlify Status"></a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/master/dist/VueFinalModal.umd.js" alt="Size"></a>
  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=master'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=master' alt='Coverage Status' /></a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal/next" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/v3/dist/VueFinalModal.umd.js" alt="Size"></a>
  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=v3'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=v3' alt='Coverage Status' /></a>
</p>

<p align="right">
  <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank" rel="noopener noreferrer">
    <img width="200" src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" />
  </a>
</p>

## 😎 Looking for a Vue 3 version? [It's over here](https://v3.vue-final-modal.org)

## 🎉 [Documentation](https://vue-final-modal.org)

## 🙌 [Examples](https://vue-final-modal.org/examples/liveDemo)

## Introduction

### **Vue Final Modal** is a **renderless component**!

You can create a [higher-order component](https://vue-final-modal.org/examples/recommend) easily and can customize `template`, `script` and `style` based on your needs.

## Features

- Support `Vue 3`, `Vue 2` and `Nuxt`
- [Tailwind CSS](https://vue-final-modal.org/examples/tailwind) friendly
- Renderless component
- [Tiny bundle size](https://bundlephobia.com/result?p=vue-final-modal)
- Support `stackable`, `detachable`, `scrollable`, `draggable`, `resizable`, `transition`, `accessibility`, `focusTrap`, `dynamic modal`

## **Development**

```bash
# Clone repo
git clone https://github.com/vue-final/vue-final-modal.git

# Run linter
yarn lint

# Run unit test
yarn test

# Build library
yarn
yarn build

# Run example
cd example
yarn
yarn dev

# Run docs
cd docs
yarn
yarn dev
```

## **Contribution**

Thank you to all the people who already contributed to `vue-final-modal`!

<a href="https://github.com/vue-final/vue-final-modal/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=vue-final/vue-final-modal" />
</a>

Made with [contributors-img](https://contrib.rocks).

To develop `vue-final-modal`, I learn a lot from these awesome libraries:

- [Vuetify](https://vuetifyjs.com/en/)
  - attach
- [Element UI](https://element.eleme.io/)
  - stackable modal
  - zIndex
  - zIndexBase
- [vue-js-modal](https://github.com/euvl/vue-js-modal)
  - dynamic modal
  - transition
  - focusTrap for A11y
- [Bootstrap Vue](https://bootstrap-vue.org/)
  - lockScroll
- [vue-resizable](https://github.com/nikitasnv/vue-resizable)
  - drag & resize

> There is no perfect library even the `final` of vue modal.

🚀 If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).