Easy to use and highly customizable Vue3 modal package.
Table of Contents
-
Less code and simpler modal management
No more importing dozens of modals on every page or manually inserting them into template sections. -
Easy control with JS/TS
Open and close modals dynamically using clean JavaScript or TypeScript without unnecessary boilerplate. -
Cascading modal support
Seamlessly open multiple modals one after another while preserving their state and context - hassle-free.
- Use a simple API to dynamically open and close modals.
- Forget about adding tons of static modals in your HTML templates.
- Add flexibility to your UI, enabling cascading modal calls with ease.
Note: Suitable for both simple use cases and complex applications requiring deep modal interactions.
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)', 'backdrop-filter': 'blur(5px)', 'z-index': 200 } })) app.mount('#app')Add ModalTarget to App.vue
<script setup lang="ts"> import { ModalTarget } from '@kolirt/vue-modal' </script> <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, SimpleModal } 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>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') })| Prop name | Type | Default value | Description |
|---|---|---|---|
| group | string | 'default' | Name of the modals holder |
| withoutOverlay | boolean | false | Disable overlay |
| Arg number | Type | Description |
|---|---|---|
| 1 | Component | vue component |
| 2 | object | props for component |
| 2 | OpenModalOptions | options |
Check closed issues with FAQ label to get answers for most asked questions.
Check out my other projects on my GitHub profile.