@kolirt/vue-modal
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Simple Vue3 modal package

Easy to use and highly customizable Vue3 modal package.

Table of Contents

Buy Me A Coffee

Getting started

Installation

Use yarn or npm to install the package @kolirt/vue-modal.

npm install --save @kolirt/vue-modal

yarn add @kolirt/vue-modal

Setup

Add dependencies to your main.js:

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

<template>
  <ModalTarget />
</template>

Usage

Basic usage

First, you need to create modal. Instead of SimpleModal, you can implement your own wrapper with your own styles.

<script setup lang="ts">
import { closeModal, confirmModal } from '@kolirt/vue-modal'

const props = defineProps({
  test: {}
})
</script>

<template>
  <SimpleModal title="Test 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>

Then you can use your modal.

<script setup lang="ts">
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')
    })
}
</script>

<template>
  <button @click="runModal">Open modal</button>
</template>

Advanced usage

Open modal with clearing modal history.

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.

Example

Example here.

FAQ

Check closed issues with FAQ label to get answers for most asked questions.

License

MIT.

Other projects

Check out my other projects:

Package Sidebar

Install

npm i @kolirt/vue-modal

Weekly Downloads

166

Version

1.0.1

License

MIT

Unpacked Size

42.7 kB

Total Files

6

Last publish

Collaborators

  • kolirt