89 lines
1.6 KiB
Markdown
89 lines
1.6 KiB
Markdown
# 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"
|
|
---
|
|
::
|