Composables

The template includes several composables to handle shared logic across the application. These composables provide reusable functionality for platform detection, navigation, user preferences, and color management.

useIsMac

File: app/composables/useIsMac.ts

A simple utility to detect if the user is on a macOS platform. Useful for showing keyboard shortcuts (e.g., Command vs. Ctrl).

useNavigation

File: app/composables/useNavigation.ts

Handles the transformation of Nuxt Content navigation data into a format suitable for the sidebar. It maps content items to their respective types (group, page, component, block).

Features

• Automatically transforms Nuxt Content navigation structure
• Categorizes items by type: page, component, block, or group
• Filters and organizes content hierarchy
• Works with the content directory structure

Return Value

Returns an object with:

• data: A reactive ref containing the transformed navigation structure

useConfig (User Configuration)

File: app/composables/useUserConfig.ts

Manages user-specific configurations that are persisted using cookies. This composable uses createSharedComposable to ensure state is shared across components.

Configuration Options

The composable manages three user preferences:

• Layout: Switch between "fixed" and "full" width
• Package Manager: Remembers the user's preference ("pnpm", "npm", "yarn", or "bun")
• Installation Type: CLI or Manual ("cli" or "manual")

Default Values

Copy{
  layout: "fixed",
  packageManager: "pnpm",
  installationType: "cli",
}

useColor

File: app/composables/useColor.ts

Manages color format preferences and tracks the last copied color value. Useful for color picker components and documentation that displays color values.

Configuration

The composable stores:

• format: The color format preference ("hsl", "rgb", "hex", or "oklch")
• lastCopied: The last color value that was copied to clipboard

Return Value

Returns an object with:

• isLoading: A computed boolean indicating if the component is mounted (prevents hydration issues)
• format: A computed ref of the current color format
• lastCopied: A computed ref of the last copied color
• setFormat(format): Function to update the color format
• setLastCopied(color): Function to update the last copied color