docs: update docs

Author: hunterliu1003

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

@@ -55,6 +55,97 @@ modalInstance.options // the state of the dynamic modal
 modalInstance.patchOptions({})
 ```
 
+## Edge Usage
+
+::alert{type=danger}
+❗️ 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.
+::
+
+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>`.
+
+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}:
+
+- 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 `modal.close()`{lang=ts}.
+- Calling `modal.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).
+- 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).
+
+### Vue 3
+
+- You have to create a plugin that export the `vfm` instance:
+  ```ts [@/plugins/vue-final-modal.ts]
+  import { createVfm } from 'vue-final-modal'
+
+  export const vfm = createVfm()
+  ```
+- Then you have to import the `vfm` instance in your `main.ts` file and register it as a Vue plugin:
+  ```ts [main.ts]
+  import { createApp } from 'vue'
+  import App from './App.vue'
+  import { vfm } from '@/plugins/vue-final-modal'
+
+  const app = createApp(App)
+
+  app.use(vfm).mount('#app')
+  ```
+- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
+  ```ts
+  // Anywhere outside out script setup
+  import { markRaw } from 'vue'
+  import { VueFinalModal, useModal } from 'vue-final-modal'
+  import { vfm } from '@/plugins/vue-final-modal'
+
+  function openConfirmModal() {
+    const modalInstance = useModal({
+      context: vfm,
+      component: markRaw(MyConfirmModal),
+      attrs: {
+        onClosed() {
+          modalInstance.destroy()
+        },
+      },
+      slots: { defaults: '<p>The content of the modal</p>' }
+    })
+
+    modalInstance.open()
+  }
+  ```
+
+### Nuxt 3
+
+- You have to create a plugin that export the `vfm` instance and register it as a Vue plugin:
+  ```ts [@/plugins/vue-final-modal.ts]
+  import { createVfm } from 'vue-final-modal'
+  import { defineNuxtPlugin } from '#app'
+
+  export const vfm = createVfm() as any
+
+  export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(vfm)
+  })
+  ```
+- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
+  ```ts
+  // Anywhere outside out script setup
+  import { markRaw } from 'vue'
+  import { VueFinalModal, useModal } from 'vue-final-modal'
+  import { vfm } from '@/plugins/vue-final-modal'
+
+  function openConfirmModal() {
+    const modalInstance = useModal({
+      context: vfm,
+      component: markRaw(MyConfirmModal),
+      attrs: {
+        onClosed() {
+          modalInstance.destroy()
+        },
+      },
+      slots: { defaults: '<p>The content of the modal</p>' }
+    })
+
+    modalInstance.open()
+  }
+  ```
+
 ## Type Declarations
 
 ::alert{type=info}

docs/content/3.api/2.composables/2.use-vfm.md

@@ -26,21 +26,23 @@ const {
 ## Global state
 
 - `vfm.modals`{lang=ts}: All modals including opened and closed modals.
-- `vfm.openedModals`{lang=ts}: All opened modals.
+- `vfm.openedModals`{lang=ts}: All opened modals including opened `vfm.modals` and opened `vfm.dynamicModals`.
 - `vfm.dynamicModals`{lang=ts}: All opened dynamic modals that create by [useModal()](/api/composables/use-modal).
 
 ## Functions
 
+`vfm` instance provides some utility functions that allows you to operate a modal (see [modalId](/api/components/vue-final-modal#modalid-optional)) or modals.
+
 - `vfm.get(modalId)`{lang=ts}: Get a modal instance by given a modalId
 - `vfm.toggle(modalId)`{lang=ts}: Toggle a modal by given a modalId
   ```ts
-  vfm.close(modalId).then(() => {
+  vfm.toggle(modalId).then(() => {
     // Do something after the modal opened or closed
   })
   ```
 - `vfm.open(modalId)`{lang=ts}: Open a modal by given a modalId
   ```ts
-  vfm.close(modalId).then(() => {
+  vfm.open(modalId).then(() => {
     // Do something after the modal opened
   })
   ```