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 VueFinalModal, { VfmOptions, VueFinalModalProperty } from 'vue-final-modal'

Vue.use<VfmOptions>(VueFinalModal(), {
  componentName: 'VModal',
  key: '$modal'
})

// define the setup options
declare module 'vue/types/vue' {
  interface Vue {
    $modal: 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, May 7, 2021