Skip to content

Commit 442a96a

Browse files
committedSep 30, 2024
Chore(docs): fill TS support section
1 parent 33ee152 commit 442a96a

File tree

1 file changed

+23
-1
lines changed

1 file changed

+23
-1
lines changed
 

‎docs/index.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,4 +139,26 @@ export default {
139139

140140
## Typescript support
141141

142-
// Todo:
142+
Typescript is supported out of the box using (SFC: be sure to add the `lang="ts"` to your script tag):
143+
144+
- The provide/inject pattern for the composition API `const $dialog = inject(injectionKey)`
145+
- Type augmentation for the options API `this.$dialog.alert('Hello!')`
146+
- Type augmentation for the directives API `v-confirm="'Hello!'"`
147+
148+
```vue title="App.vue"
149+
<template>
150+
<button @click="openDialog">Open dialog</button>
151+
</template>
152+
<script lang="ts" setup>
153+
import {inject} from "vue";
154+
import {injectionKey} from 'vuejs-dialog'
155+
156+
const $dialog = inject(injectionKey)
157+
const openDialog = () => $dialog.alert('Hello world!')
158+
</script>
159+
```
160+
161+
162+
::: info
163+
You may want to look at the [module resolution option](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler) (introduced in Typescript 5.0) if you are experiencing [issues](https://stackoverflow.com/questions/75870063/vscode-and-typescript-5-moduleresolution-bundler) with typescript especially if your config is set to "bundler"
164+
:::

0 commit comments

Comments
 (0)
Please sign in to comment.