Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months 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 (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-15T19:13:18.000Z (6 months ago)
- Last Synced: 2024-07-19T14:35:40.647Z (4 months ago)
- Topics: modal, modal-dialog, modal-dialogs, modal-windows, vue, vuejs
- Language: Vue
- Homepage: https://kolirt.github.io/vue-modal/
- Size: 772 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- 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)
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Basic usage](#basic-usage)
- [Advanced usage](#)
- [Options](#options)
- [Demo](#demo)
- [Example](#example)
- [Faq](#faq)
- [License](#license)
- [Other packages](#other-packages)# Getting started
## Installation
Use yarn or npm to install the package `@kolirt/vue-modal`.
```bash
npm install --save @kolirt/vue-modalyarn 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
```
# 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 } 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).