Skip to content

Commit d0307cd

Browse files
committed
docs: remove Edge Usage section
1 parent 8ee2021 commit d0307cd

File tree

1 file changed

+0
-89
lines changed

1 file changed

+0
-89
lines changed

docs/content/3.api/2.composables/1.use-modal.md

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -131,95 +131,6 @@ const modalInstance = useModal({
131131
`useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
132132
::
133133

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-
export const 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-
import App from './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}:
167-
```ts
168-
// Anywhere outside out script setup
169-
import { VueFinalModal, useModal } from 'vue-final-modal'
170-
import { vfm } from '@/plugins/vue-final-modal'
171-
172-
export function openModalConfirm() {
173-
const modalInstance = useModal({
174-
context: vfm,
175-
component: ModalConfirm,
176-
attrs: {
177-
onClosed() {
178-
modalInstance.destroy()
179-
},
180-
},
181-
slots: { default: '<p>The content of the modal</p>' }
182-
})
183-
184-
modalInstance.open()
185-
}
186-
```
187-
188-
### Nuxt 3
189-
190-
- You have to create a plugin that export the `vfm` instance and register it as a Vue plugin:
191-
```ts [@/plugins/vue-final-modal.ts]
192-
import { createVfm } from 'vue-final-modal'
193-
import { defineNuxtPlugin } from '#app'
194-
195-
export const vfm = createVfm() as any
196-
197-
export default defineNuxtPlugin((nuxtApp) => {
198-
nuxtApp.vueApp.use(vfm)
199-
})
200-
```
201-
- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
202-
```ts
203-
// Anywhere outside out script setup
204-
import { VueFinalModal, useModal } from 'vue-final-modal'
205-
import { vfm } from '@/plugins/vue-final-modal'
206-
207-
export function openModalConfirm() {
208-
const modalInstance = useModal({
209-
context: vfm,
210-
component: ModalConfirm,
211-
attrs: {
212-
onClosed() {
213-
modalInstance.destroy()
214-
},
215-
},
216-
slots: { default: '<p>The content of the modal</p>' }
217-
})
218-
219-
modalInstance.open()
220-
}
221-
```
222-
223134
## Type Declarations
224135

225136
::alert{type=info}

0 commit comments

Comments
 (0)