1 files changed, 88 insertions, 0 deletions
diff --git a/docs/.docs/content/2.api/2.composables.md b/docs/.docs/content/2.api/2.composables.md
new file mode 100644
index 0000000..4c0bea2
--- /dev/null
+++ b/docs/.docs/content/2.api/2.composables.md
@@ -0,0 +1,88 @@
+# Composables
+
+Discover the Docus composables to use in your custom Vue components and pages.
+
+## `useDocus()`
+
+`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts`
+
+- `config` refers to the merged config of the current page.
+
+`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file.
+
+The configs in `app.config` file will be used as defaults.
+
+```vue
+<script setup>
+const { config } = useDocus()
+</script>
+
+<template>
+  <div>
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
+  </div>
+</template>
+```
+
+- `tree` refers to the current navigation tree that is displayed in the `aside` component.
+
+```vue
+<script setup>
+const { tree } = useDocus()
+</script>
+
+<template>
+  <DocsAsideTree :links="tree" />
+</template>
+```
+
+::source-link
+---
+source: "composables/useDocus.ts"
+---
+::
+
+## `useMenu()`
+
+`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally.
+
+```ts
+const {
+  // Is menu visible
+  visible,
+  // Close menu function
+  close,
+  // Open menu function
+  open,
+  // Toggle menu function
+  toggle
+} = useMenu()
+```
+
+::source-link
+---
+source: "composables/useMenu.ts"
+---
+::
+
+## `useScrollspy()`
+
+`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings.
+
+```ts
+const {
+  // Headings on the page
+  visibleHeadings,
+  // Active headings (for the current page)
+  activeHeadings,
+  // Update headings (an array of DOM nodes)
+  updateHeadings
+} = useScrollspy()
+```
+
+::source-link
+---
+source: "composables/useScrollspy.ts"
+---
+::