2.composables.md

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.

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

::source-link

source: "composables/useDocus.ts"

::

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

::source-link

source: "composables/useMenu.ts"

::

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

::source-link

source: "composables/useScrollspy.ts"

::