# 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"
---
::