https://github.com/kolirt/vue-modal
⚡️ Easy to use and highly customizable Vue3 modal package
https://github.com/kolirt/vue-modal
modal modal-dialog modal-dialogs modal-windows vue vuejs
Last synced: about 1 month ago
JSON representation
⚡️ Easy to use and highly customizable Vue3 modal package
- Host: GitHub
- URL: https://github.com/kolirt/vue-modal
- Owner: kolirt
- License: mit
- Created: 2023-06-28T11:46:50.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-29T10:17:14.000Z (2 months ago)
- Last Synced: 2025-05-06T04:38:08.224Z (about 1 month ago)
- Topics: modal, modal-dialog, modal-dialogs, modal-windows, vue, vuejs
- Language: Vue
- Homepage: https://kolirt.github.io/vue-modal/
- Size: 942 KB
- Stars: 17
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - @kolirt/vue-modal - Easy to use and highly customizable Vue3 modal package. (Packages)
README
Simple Vue3 modal package
Easy to use and highly customizable Vue3 modal package.
**Table of Contents**
- [Getting started](#getting-started)
- [Advantages of using this solution](#advantages-of-using-this-solution)
- [🔥 Key benefits](#-key-benefits)
- [🚀 How It Works](#-how-it-works)
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Basic usage](#basic-usage)
- [Advanced usage](#advanced-usage)
- [Options](#options)
- [Demo](#demo)
- [Example](#example)
- [Faq](#faq)
- [License](#license)
- [Other packages](#other-packages)
# Getting started
## Advantages of using this solution
### 🔥 Key benefits:
- **Less code and simpler modal management**
No more importing dozens of modals on every page or manually inserting them into template sections.
- **Easy control with JS/TS**
Open and close modals dynamically using clean JavaScript or TypeScript without unnecessary boilerplate.
- **Cascading modal support**
Seamlessly open multiple modals one after another while preserving their state and context - hassle-free.
### 🚀 How It Works:
1. Use a simple API to dynamically open and close modals.
2. Forget about adding tons of static modals in your HTML templates.
3. Add flexibility to your UI, enabling cascading modal calls with ease.
> **Note:** Suitable for both simple use cases and complex applications requiring deep modal interactions.
## Installation
Use yarn or npm to install the package `@kolirt/vue-modal`.
```bash
npm install --save @kolirt/vue-modal
yarn add @kolirt/vue-modal
```
## Setup
Add dependencies to your `main.js`:
```javascript
import { createApp } from 'vue'
import { createModal } from '@kolirt/vue-modal'
const app = createApp({ ... })
app.use(createModal({
transitionTime: 200,
animationType: 'slideDown',
modalStyle: {
padding: '5rem 2rem',
align: 'center',
'z-index': 201
},
overlayStyle: {
'background-color': 'rgba(0, 0, 0, .5)',
'backdrop-filter': 'blur(5px)',
'z-index': 200
}
}))
app.mount('#app')
```
Add `ModalTarget` to `App.vue`
```vue
import { ModalTarget } from '@kolirt/vue-modal'
```
# Usage
## Basic usage
First, you need to create modal. Instead of `SimpleModal`, you can implement your own wrapper with your own styles.
```vue
import { closeModal, confirmModal, SimpleModal } from '@kolirt/vue-modal'
const props = defineProps({
test: {}
})
props: {{ props }}
Confirm
Close
```
Then you can use your modal.
```vue
import { openModal } from '@kolirt/vue-modal'
import { defineAsyncComponent } from 'vue'
import TestModal from '@/components/modals/TestModal.vue'
function runModal() {
openModal(TestModal, {
test: 'some props'
})
// runs when modal is closed via confirmModal
.then((data) => {
console.log('success', data)
})
// runs when modal is closed via closeModal or esc
.catch(() => {
console.log('catch')
})
}
function runDynamicModal() {
openModal(
defineAsyncComponent(() => import('@/components/modals/TestModal.vue')),
{
test: 'some props'
}
)
// runs when modal is closed via confirmModal
.then((data) => {
console.log('success', data)
})
// runs when modal is closed via closeModal or esc
.catch(() => {
console.log('catch')
})
}
Open modal
```
## Advanced usage
Open modal with clearing modal history.
```js
openModal(
TestModal,
{
test: 'some props'
},
{ force: true }
)
// runs when modal is closed via confirmModal
.then((data) => {
console.log('success', data)
})
// runs when modal is closed via closeModal or esc
.catch(() => {
console.log('catch')
})
```
# Options
## Component `ModalTarget` props
Prop name
Type
Default value
Description
group
string
'default'
Name of the modals holder
withoutOverlay
boolean
false
Disable overlay
## Function `openModal` args
Arg number
Type
Description
1
Component
vue component
2
object
props for component
2
OpenModalOptions
options
# Demo
[Demo here](https://kolirt.github.io/vue-modal/)
# Example
[Example here](https://github.com/kolirt/vue-modal/tree/master/examples)
# FAQ
Check closed [issues](https://github.com/kolirt/vue-modal/issues) with `FAQ` label to get answers for most asked
questions.
# License
[MIT](./LICENSE)
# Other packages
Check out my other projects on my [GitHub profile](https://github.com/kolirt).