Setup

Installation

Vue 3

npm install vue-final-modal@next
yarn add vue-final-modal@next
pnpm add vue-final-modal@next

Import base on your needs

Checkout:

<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@next"></script>
  • Unpkg
<script src="https://unpkg.com/vue-final-modal@next"></script>
Edit this page on GitHub Updated at Fri, Oct 15, 2021