Usage with Typescript

Vue

It just works like a charm without any settings. But if you need to customize the setup options, you can define the type like below:

main.ts
import Vue from 'vue'
import { vfmPlugin, VfmOptions, VueFinalModalProperty } from 'vue-final-modal'

Vue.use<VfmOptions>(vfmPlugin({
  key: '$vfm',
  componentName: 'VueFinalModal',
  dynamicContainerName: 'ModalsContainer'
}))

// define the setup options
declare module 'vue/types/vue' {
  interface Vue {
    $vfm: VueFinalModalProperty
  }
}

Nuxt

Add the types to your types array in tsconfig.json file

tsconfig.json
{
  "compilerOptions": {
    "types": [
      // other types
      // ...
      "vue-final-modal"
    ]
  }
}
Edit this page on GitHub Updated at Fri, Feb 3, 2023