Universal modal plugin for Vue@3
⚠️ This plugin does not support Vue@2
vue-universal-modal
plugin is based on the teleport.
It is very light and simple, but it provides essential features for modal use in applications.
(Such as Add & Remove, Visible & Hidden, Transition, Auto bind keyboard and mouse to close, Support SSR, A11Y…)
npm install vue-universal-modal
And install this plugin in vue application
import VueUniversalModal from 'vue-universal-modal'
// import VueUniversalModal from 'vue-universal-modal/dist/index.es5' // If need to use es5 build
import 'vue-universal-modal/dist/index.css'
app.use(VueUniversalModal)
app.use(VueUniversalModal, {
teleportComponent: 'MyModalTeleport',
teleportComponentId: 'my-modal-teleport',
modalComponent: 'MyModal',
})
name | type | detault | description |
---|---|---|---|
teleportComponent | string |
'VueUniversalModal' |
Global teleport component name |
teleportComponentId | string |
'vue-universal-modal-teleport' |
Global teleport component id |
modalComponent | string |
'Modal' |
Global modal component name |
Insert the teleport component into the root component.
<template>
<Main />
<VueUniversalModal />
<!-- If the option changed teleport component the name
<MyModalTeleport />
-->
</template>
Insert the component wrapped with the modal component. (Slot based)
<template>
<Modal>
<!-- If the option changed modal component the name
<MyModal>
-->
<div class="modal">
<h2>Hello</h2>
<p>
Vue Universal Modal
</p>
</div>
</Modal>
</template>
<style scoped lang="scss">
.modal {
width: 300px;
padding: 30px;
box-sizing: border-box;
background-color: #fff;
font-size: 20px;
text-align: center;
}
</style>
name | type | detault | description |
---|---|---|---|
close | function |
() => {} |
Function to close a modal |
disabled | boolean |
false |
Handle visibility (as in v-show) |
options | object |
{} |
|
id | string |
'' |
|
class | string |
'' |
|
ariaLabelledby | string |
'' |
Applying modal heading id helps with accessibility. |
name | type | detault | description |
---|---|---|---|
transition | number |
false |
300 |
closeClickDimmed | boolean |
true |
Closes the modal when dimmed is clicked |
closeKeyCode | number |
false |
27 (esc) |
styleModal | object |
{} |
Inject modal window style (.vue-universal-modal ) |
styleModalContent | object |
{} |
Inject modal content style (.vue-universal-modal-content ) |
There are slot arguments that can be used within modal content.
name | type | description |
---|---|---|
emitClose | function | The modal component must be unmount after the transitionEnd event. |
So we need to pass the close function to props and run emitClose with logic wrapped. |
<template>
<p>
<button @click="showModal">
Show modal
</button>
</p>
<Modal
v-if="isShow"
v-slot="{ emitClose }"
:close="closeModal"
>
<div class="modal">
<p>
Hello
</p>
<button @click="emitClose">
close
</button>
</div>
</Modal>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const isShow = ref(false)
function showModal () {
isShow.value = true
}
function closeModal () {
isShow.value = false
}
return {
isShow,
showModal,
closeModal
}
}
})
</script>
You can change it directly to your own style by referring to the source
.vue-universal-modal {
/* Change dimmed color */
background-color: rgba(255, 255, 0, 0.3);
}
.vue-universal-modal-content {
/* Align to top (flex-direction property value is set to column) */
justify-content: flex-start;
}
Author: hoiheart
Source Code: https://github.com/hoiheart/vue-universal-modal
#vue #vuejs #javascript