Composables

Discover the Docus composables to use in your custom Vue components and pages.

useDocus()

useDocus() 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.

<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.

<script setup>const { tree } = useDocus()</script><template>  <DocsAsideTree :links="tree" /></template>

useMenu()

useMenu() gives access to $menu plugin controlling mobile navigation globally.

const {  // Is menu visible  visible,  // Close menu function  close,  // Open menu function  open,  // Toggle menu function  toggle} = useMenu()

useScrollspy()

useScrollspy() is used in docs layout to make the ToC display the currently visible headings.

const {  // Headings on the page  visibleHeadings,  // Active headings (for the current page)  activeHeadings,  // Update headings (an array of DOM nodes)  updateHeadings} = useScrollspy()