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