Setup
Installation
Vue 3
npm install vue-final-modal@3
yarn add vue-final-modal@3
pnpm add vue-final-modal@3
Import base on your needs
Checkout:
- $vfm for using $vfm API.
- VueFinalModal for using basic modal component.
- ModalsContainer for using dynamic modal.
<script>
import { $vfm, VueFinalModal, ModalsContainer } from 'vue-final-modal'
export default {
components: {
VueFinalModal,
ModalsContainer
}
}
</script>
Global Register plugin
Import plugin vfmPlugin
- Type:
Function | PluginObject - Arguments:
Object- default;
{ key: '$vfm', componentName: 'VueFinalModal', dynamicContainerName: 'ModalsContainer' } - Returns:
PluginObject - Examples:
import { vfmPlugin } from 'vue-final-modal'
// or
import vfmPlugin from 'vue-final-modal'
Register plugin in Vue 3
main.js
import { vfmPlugin } from 'vue-final-modal'
App.use(vfmPlugin)
Overwrite key, componentName, dynamicContainerName
main.js
import { vfmPlugin } from 'vue-final-modal'
Vue.use(vfmPlugin({
key: '$vfm',
componentName: 'VueFinalModal',
dynamicContainerName: 'ModalsContainer'
}))
CDN
- jsDelivr
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal@3"></script>
- Unpkg
<script src="https://unpkg.com/vue-final-modal@3"></script>