Setup
Installation
Vue 3
npm install vue-final-modal
yarn add vue-final-modal
pnpm add vue-final-modal
Vue 2
npm install vue-final-modal@legacy
yarn add vue-final-modal@legacy
yarn add vue-final-modal@legacy
Import based 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 2
main.js
import { vfmPlugin } from 'vue-final-modal'
Vue.use(vfmPlugin)
Register plugin in Nuxt
- Write a plugin
vue-final-modal.js
plugins/vue-final-modal.js
import Vue from 'vue'
import { vfmPlugin } from 'vue-final-modal/lib'
Vue.use(vfmPlugin)
- Add plugin into
nuxt.config.js
nuxt.config.js
export default {
plugins: ['~plugins/vue-final-modal.js'],
build: {
transpile: ['vue-final-modal']
}
}
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"></script>
- Unpkg
<script src="https://unpkg.com/vue-final-modal"></script>