Looking for a Vue 3 version? It's over here
🙌 Examples
Vue Final Modal
is a renderless component
You can create a higher-order component easily and can customize template
, script
and style
based on your needs.
features:
- Support Vue 3 and Vue 2
- Tailwind CSS friendly
- Renderless component
- SSR support
- Stackable
- Detachable
- Scrollable
- Transition support
- Mobile friendly
- Tiny bundle size
- Accessibility support
Vue 3.0
NPM:
npm install vue-final-modal@next --save
Yarn:
yarn add vue-final-modal@next
Vue 2.0
NPM:
npm install vue-final-modal --save
Yarn:
yarn add vue-final-modal
import VueFinalModal from 'vue-final-modal'
Vue.use(VueFinalModal)
- Write a plugin
vue-final-modal.js
// plugins/vue-final-modal.js
import VueFinalModal from 'vue-final-modal/lib'
Vue.use(VueFinalModal)
- Add plugin into
nuxt.config.js
// nuxt.config.js
export default {
plugins: [
{ src: '~plugins/vue-final-modal.js' }
],
build: {
transpile: ['vue-final-modal']
}
}
- jsDelivr
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>
- Unpkg
<script src="https://unpkg.com/vue-final-modal"></script>
<vue-final-modal v-model="showModal">
Modal Content Here
</vue-final-modal>
<button @click="showModal = true">Launch</button>
<vue-final-modal v-model="showModal" name="example">
Modal Content Here
</vue-final-modal>
this.$vfm.show('example')
Plugin API can be called within any component through this.$vfm
.
- Type:
Array
A stack array store the opened modal's vue component instance.
You can use:
$vfm.openedModals[0]
to get the first opened modal instance.$vfm.openedModals.length
to get how many modals is opened.
- Type:
Array
All modal instances include show and hide.
- Type:
Function
- Arguments:
- name:
String
- Name of the modal
- name:
- Example:
<template>
<vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
</template>
<script>
export default {
name: 'MyComponent',
data: () => ({
show: false
}),
mounted () {
this.$vfm.show('example')
}
}
</script>
- Type:
Function
- Arguments:
- name:
String
- Name of the modal
- name:
- Example:
<template>
<vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
</template>
<script>
export default {
name: 'MyComponent',
data: () => ({
show: true
}),
mounted () {
this.$vfm.hide('example')
}
}
</script>
hide all modals.
- Type:
Function
- Arguments:
- name:
String
- Name of the modal - show:
Boolean
- Show modal or not
- name:
toggle modal by name.
{
value: { type: Boolean, default: false },
ssr: { type: Boolean, default: true },
classes: { type: [String, Object, Array], default: '' },
overlayClass: { type: [String, Object, Array], default: '' },
contentClass: { type: [String, Object, Array], default: '' },
styles: { type: [String, Object, Array], default: '' },
overlayStyle: { type: [String, Object, Array], default: '' },
contentStyle: { type: [String, Object, Array], default: '' },
lockScroll: { type: Boolean, default: true },
hideOverlay: { type: Boolean, default: false },
clickToClose: { type: Boolean, default: true },
preventClick: { type: Boolean, default: false },
attach: { type: null, default: false, validator: validateAttachTarget },
transition: { type: String, default: 'vfm' },
overlayTransition: { type: String, default: 'vfm' },
zIndexBase: { type: [String, Number], default: 1000 },
zIndex: { type: [Boolean, String, Number], default: false },
focusTrap: { type: Boolean, default: false }
}
- Emits while modal container on click.
If prop
clickToClose
isfalse
, the event will still be emitted.
- Emits while modal is still invisible, but before transition starting.
- Emits after modal became visible and transition ended.
- Emits before modal is going to be closed.
- Emits right before modal is destroyed.
If you have any ideas for optimization of vue-final-modal
, feel free to open issues or pull requests.