Easy & Customizable Modal Manager For Vue 3

Install & Download:

# Yarn
$ yarn @kolirt/vue-modal
# NPM
$ npm i @kolirt/vue-modal

Description:

A simple yet customizable modal component to create and manage modal windows in your Vue 3 applications.

How to use it:

1. Import and register the modal manager.

// main.js
import {createApp} from 'vue'
import {createModal} from '@kolirt/vue-modal'
const app = createApp({...})
app.use(createModal({
  // options here
}))
app.mount('#app')

2. Add the <ModalTarget/> to the app.vue.

<template>
  <ModalTarget/>
</template>

3. Create a modal instance.

<script setup lang="ts">
import {closeModal, confirmModal} from '@kolirt/vue-modal'
const props = defineProps({
  test: {}
})
</script>
<template>
  <SimpleModal title="Example Modal" size="sm">
    <pre>props: {{ props }}</pre>
    <template #footer>
      <button @click="confirmModal({value: 'some values'})" class="btn btn-primary">
        Confirm
      </button>
      <button @click="closeModal()" class="btn btn-primary">
        Close
      </button>
    </template>
  </SimpleModal>
</template>

4. Lanuch the modal window.

<script setup lang="ts">
import {defineAsyncComponent} from 'vue'
import {openModal} from '@kolirt/vue-modal'
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')
  })
}
</script>
<template>
  <button @click="runModal">Open modal</button>
</template>

5. Available options.

app.use(createModal({
  transitionTime: 200,
  animationType: 'slideDown',
  modalStyle: {
    padding: undefined,
    align: 'center',
    'z-index': 201
  },
  overlayStyle: {
    'background-color': 'rgba(0, 0, 0, 0.9)',
    'z-index': 200
  }
}))

Preview:

Changelog:

v1.0.1 (04/15/2024)

• Added: backdrop-filter option for overlay