Skip to content

Commit bb47d89

Browse files
committed
doc: add typescript setting instructions
1 parent 6a00df7 commit bb47d89

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

docs/content/en/index.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -586,6 +586,47 @@ Or get `params` on `@beforeOpen` event:
586586

587587
<alert>`parmas` will be reset to `{}` automatically after `closed` event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
588588

589+
## TypeScript
590+
591+
### Vue
592+
Works out of the box in Vue, no other settings are required. But if you customized your access key, you must define the type yourself like below:
593+
594+
```ts
595+
import Vue from 'vue'
596+
import VueFinalModal, {
597+
VfmOptions,
598+
VueFinalModalProperty
599+
} from 'vue-final-modal'
600+
601+
Vue.use<VfmOptions>(VueFinalModal(), {
602+
componentName: 'MyComponentName',
603+
key: 'myKey',
604+
})
605+
606+
// define the type of access key yourself
607+
declare module 'vue/types/vue' {
608+
interface Vue {
609+
myKey: VueFinalModalProperty;
610+
}
611+
}
612+
```
613+
614+
### Nuxt
615+
616+
Add the types to your "types" array in tsconfig.json file
617+
618+
```js
619+
{
620+
"compilerOptions": {
621+
"types": [
622+
// other types
623+
// ...
624+
"vue-final-modal"
625+
]
626+
}
627+
}
628+
```
629+
589630
## **Contribution**
590631

591632
👋 Hi I'm Hunter, the author of `vue-final-modal`.

0 commit comments

Comments
 (0)