useCategory

GitHub View source

useCategory manages the category configuration system for the documentation sidebar, defining each category's display title and ordering rules via the categories property to group component or composable documentation by feature. Override the implementation at app/composables/useCategory.ts to customize the category configuration.

Overview

Manages the documentation category system, making it easy to group and navigate documentation.

Configuring categories

Create composables/useCategory.ts in your project to override the default configuration:

export function useCategory() {
  return {
    categories: {
      components: [
        {
          id: 'content',
          title: 'Content Components',
          icon: 'i-lucide-component'
        },
        {
          id: 'layout',
          title: 'Layout Components',
          icon: 'i-lucide-layout-dashboard'
        }
      ],
      composables: [
        {
          id: 'navigation',
          title: 'Navigation',
          icon: 'i-lucide-compass'
        },
        {
          id: 'ui',
          title: 'UI Utilities',
          icon: 'i-lucide-sparkles'
        }
      ]
    }
  }
}

Using categories in frontmatter

---
title: ComponentPropsLinks
category: content
---

API

`useCategory()`

Returns the category configuration.

Return value

Changelog

No recent changes

useNavigation

useNavigation manages the documentation sidebar navigation tree, providing a sub-navigation list grouped by category, the set of root-level navigation items, and breadcrumb navigation data. Built on Nuxt Content's queryCollectionNavigation API, it works with useCategory to implement grouped sidebar navigation.

useTheme

useTheme is the core composable of the theme customization system, managing the primary color, neutral color, border radius, font family, and icon set configuration, with support for dark, light, and system color modes. From the ThemePicker, you can export CSS variables or app.config.ts configuration to persist your theme.