Easy to use and highly customizable Vue3 modal package.
Table of Contents
Use yarn or npm to install the package @kolirt/vue-modal.
npm install --save @kolirt/vue-modal
yarn add @kolirt/vue-modalAdd 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)',
'z-index': 200
}
}))
app.mount('#app') Add ModalTarget to App.vue
<template>
<ModalTarget/>
</template>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 {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>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')
})Check closed issues with FAQ label to get answers for most asked questions.
MIT.
Check out my other projects:
- @kolirt/vue-web3-auth - simple WalletConnect v2 integration package for Vue3 apps.