@kolirt/vue-modal
v1.0.3
Published
Simple Vue3 modal package
Downloads
418
Maintainers
Readme
Easy to use and highly customizable Vue3 modal package.
Table of Contents
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
Function openModal
args
Demo
Example
FAQ
Check closed issues with FAQ
label to get answers for most asked
questions.
License
Other packages
Check out my other projects on my GitHub profile.