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