Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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)


Buy Me A Coffee

# Getting started

## 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

```

# 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).