You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
132
132
::
133
133
134
-
## Edge Usage
135
-
136
-
::alert{type=danger}
137
-
❗️ If you really need to call `useModal()`{lang=ts} outside of `<script setup>`, there is a way to approach it but you must use it carefully.
138
-
::
139
-
140
-
There is a optional property that is `options.context`{lang=ts}, it accept a vfm instance. If given a vfm instance to `options.context`{lang=ts}, `useModal()`{lang=ts} will use the vfm instance internally instead of the injected vfm instance. This will allow you to use `useModal()`{lang=ts} outside out `<script setup>`.
141
-
142
-
You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no longer need the dynamic modal instance anymore. Here are some key points that you need to know about `modalInstance.destroy()`{lang=ts} and `modalInstance.close()`{lang=ts}:
143
-
144
-
- Calling `modalInstance.destroy()`{lang=ts} will delete the modal instance inside of `vfm.dynamicModals`. So if you have an opened modal, the modal will be closed if you calling `modalInstance.destroy()` without calling `modalInstance.close()`{lang=ts}.
145
-
- Calling `modalInstance.close()`{lang=ts} will not delete the modal instance inside of `vfm.dynamicModals`. So if you keep calling the `useModal()`{lang=ts}, the length of `vfm.dynamicModals` will keep growing until you have memory leak (see [#277](https://github.com/vue-final/vue-final-modal/issues/277)). This is the reason why you have to manually call `modalInstance.destroy()`{lang=ts} whenever you no longer need the dynamic modal instance anymore (usually in `onClosed` hook).
146
-
- Without calling `modalInstance.destroy()`{lang=ts} correctly, the memory leak might occur both on server side (Nuxt 3) and on client side (Vue 3 SPA).
147
-
148
-
### Vue 3
149
-
150
-
- You have to create a plugin that export the `vfm` instance:
151
-
```ts [@/plugins/vue-final-modal.ts]
152
-
import { createVfm } from'vue-final-modal'
153
-
154
-
exportconst vfm =createVfm()
155
-
```
156
-
- Then you have to import the `vfm` instance in your `main.ts` file and register it as a Vue plugin:
157
-
```ts [main.ts]
158
-
import { createApp } from'vue'
159
-
importAppfrom'./App.vue'
160
-
import { vfm } from'@/plugins/vue-final-modal'
161
-
162
-
const app =createApp(App)
163
-
164
-
app.use(vfm).mount('#app')
165
-
```
166
-
- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
0 commit comments