Setup

Installation

Vue 3

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

Vue 2

npm install vue-final-modal@latest
yarn add vue-final-modal@latest
yarn add vue-final-modal@latest

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 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 { 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>
Edit this page on GitHub Updated at Fri, Jun 25, 2021