Composables

Complete API reference for all layer composables.

Overview

The layer provides composables across core and module locations:

layer/app/composables/ — Core composables (content, navigation, forms, storage, social)
layer/modules/events/runtime/composables/ — Event tracking (useEvents, useUserIdentity)
layer/modules/changelog/runtime/composables/ — Changelog (useChangelog)
layer/modules/docs/runtime/composables/ — Docs features (useSearch, useCitations, useGlossary, useSourcesTable)
layer/modules/rss/runtime/composables/ — RSS feeds (useRssFeed)

All composables are auto-imported by Nuxt. No explicit imports needed.

Event Tracking

useEvents

Core event tracking. Wraps events with userId and timestamp, emits events:track hook for all providers.

const { trackEvent } = useEvents()

await trackEvent({
  id: 'email_submit',
  type: 'form_submitted',
  location: 'hero',
  data: { email: '[email protected]' },
})

Returns:

trackEvent

(event: Partial<EventPayload>) => Promise<EventResponse>

Track event with auto-populated userId and timestamp.

useUserIdentity

Anonymous user identity for cross-session tracking. Uses Web Crypto API. SSR-safe.

const { getUserId } = useUserIdentity()

const userId = getUserId() // Persisted across sessions

Returns:

getUserId

() => string

Get or create persistent anonymous user ID.

Centralized content configuration and path resolution. Uses the content.routeMap from app.config.ts to resolve routes to collections. Consumers use queryCollection('name') directly for data fetching.

const { routing, getCollectionForRoute, resolveInternalPath, getPageMetadata } = useContentConfig()

// Routing paths
routing.sources     // e.g., '/sources'
routing.offers      // e.g., '/offers'

// Dynamic resolution
const collection = getCollectionForRoute('/docs/getting-started') // 'docs'

Returns:

routing

Record<string, string>

Pre-resolved routing paths.

getCollectionForRoute

(path) => string

Map a route path to its collection using the routeMap config.

resolveInternalPath

(path, collection?) => string

Resolve path with collection prefix.

getPageMetadata

(path) => ContentNavigationItem | null

Get page metadata from navigation.

useContentPage

Unified content page composable for route-based collection resolution and page data fetching.

const { collection, getPage, setContext, context } = useContentPage()

// Fetch page for current route
const { data: page } = await getPage()

// Share context with layouts/components
setContext(page.value)

Returns:

collection

ComputedRef<string>

Current collection based on route.

getPage

() => AsyncData

Fetch page data for current route.

setContext

(page, extras?) => void

Update shared page context.

context

Ref<ContentPageContext | null>

Shared page context state.

useChangelog

Changelog data fetching and author resolution. Provided by the changelog module.

const { items, pending, getAuthorForItem } = useChangelog({
  labelField: 'label',
  sortField: 'date',
  sortOrder: 'DESC',
  showAuthor: true,
  showImage: true,
})

Returns:

items

Ref<ChangelogCollectionItem[]>

Changelog items (async).

pending

boolean

Loading state.

getAuthorForItem

(item) => AuthorData | null

Resolve author for entry.

useCitations

Academic citation management per route. Provided by the docs module (requires citations: true).

const { addCitation, getCitationIndex, getReference } = useCitations()

addCitation('smith-2024')
const index = getCitationIndex('smith-2024') // ComputedRef<number>
const ref = getReference('smith-2024')       // ComputedRef<Reference>

Returns:

citations

ComputedRef<string[]>

Citations for current page.

allRefs

ComputedRef<Reference[]>

All flattened references.

addCitation

(id: string) => void

Add citation to page.

getCitationIndex

(id: string) => ComputedRef<number>

Get 1-indexed citation number.

getReference

(id: string) => ComputedRef<Reference | undefined>

Get reference object.

validateCitation

(id: string) => ComputedRef<ValidationStatus>

Validate citation ID.

findSimilarIds

(id, max?) => ComputedRef<string[]>

Fuzzy search for similar IDs.

useGlossary

Glossary term fetching and lookup. Provided by the docs module (requires glossary: true).

const { getTerm, resolveGlossaryPath } = useGlossary()

const term = getTerm('mvp')           // ComputedRef<TermWithCategory>
const path = resolveGlossaryPath('mvp') // '/glossary?term=mvp'

Returns:

glossaryData

Ref<GlossaryCollectionItem[] | null>

All glossary data.

allTerms

ComputedRef<Term[]>

Flattened terms array.

allTermsWithCategory

ComputedRef<TermWithCategory[]>

Terms with metadata.

categoryColors

ComputedRef<Record<string, string>>

Category color map.

getTerm

(termId: string) => ComputedRef<TermWithCategory | undefined>

Get term by ID.

resolveGlossaryPath

(termId: string) => string

Get glossary URL.

Navigation

useNavigation

Fetches all navigation data from content collections. Async composable.

const { navigationHeader, navigationFooter, banner } = await useNavigation()

Returns:

navigationAll

ComputedRef<ContentNavigationItem[]>

Full content navigation tree.

navigationHeader

ComputedRef<HeaderConfig>

Header navigation config.

navigationFooter

ComputedRef<FooterConfig>

Footer navigation config.

banner

ComputedRef<BannerProps | undefined>

Banner config.

useSearch

Fetches searchable content sections from configured collections. Async, client-side only. Provided by the docs module (requires search: true).

const { searchFiles } = await useSearch()

Returns:

searchFiles

AsyncDataRef

Flattened search sections from all searchable collections.

Forms and Capture

useFormCapture

Form validation, anti-spam, and submission. Extracts all business logic from Form.vue.

const { state, schema, isSubmitting, honeypot, handleSubmit } = useFormCapture({
  fields: [{ name: 'email', type: 'email', required: true }],
  location: 'hero',
  offerSlug: 'free-guide',
})

Returns:

state

Reactive<Record<string, string>>

Form field values.

schema

ComputedRef<ZodSchema>

Dynamic validation schema.

isSubmitting

Ref<boolean>

Loading state.

honeypot

Ref<string>

Anti-spam honeypot field.

handleSubmit

() => Promise<void>

Validate and submit form.

useSocialLinks

Maps a socials config object into link objects with platform-appropriate icons.

const links = useSocialLinks(computed(() => siteConfig.socials))
// [{ icon: 'i-simple-icons-github', to: 'https://github.com/...', label: 'GitHub', target: '_blank' }]

Returns: ComputedRef<SocialLink[]>

useSocialShare

Page sharing with clipboard copy and platform links.

const { menuItems, share, copyLink, copied } = useSocialShare(
  computed(() => ({ title: 'My Page', description: 'Check this out' }))
)

Returns:

copied

Ref<boolean>

Copy feedback state.

shareUrl

ComputedRef<string>

Current page URL.

menuItems

ComputedRef<MenuItem[]>

Share menu options.

(platform: string) => void

Open share link or copy.

copyLink

() => Promise<void>

Copy URL to clipboard.

useRssFeed

RSS feed metadata and feeds page URL. Reads config from rss.feeds in nuxt.config.ts.

const { feeds, feedsPageUrl, trackClick } = useRssFeed()

Returns:

feeds

ComputedRef<RSSFeedInfo[]>

Array of { name, url, title, description } for each configured feed.

feedsPageUrl

ComputedRef<string>

Route to the feeds listing page.

trackClick

(location: string) => void

Fire an offer_click event.

Storage

useAppStorage

SSR-safe storage abstraction with config-source prefix.

const { local, session, getKey } = useAppStorage()

local.set('visited', 'true')
local.get('visited')  // 'true'
local.all()           // All prefixed items
local.clear()         // Clear all prefixed items

// Prefixed key
getKey('visited')     // 'foundry:visited'

Returns:

local

StorageAPI

get, set, remove, all, clear for localStorage.

session

StorageAPI

get, set, remove, all, clear for sessionStorage.

getKey

(key: string) => string

Get prefixed storage key.

Development

useDevConfig

Development-only utilities for inspecting storage state. Returns reduced API in production.

const { clearAllStorage, getStorageSnapshot } = useDevConfig()

// Development only
const snapshot = getStorageSnapshot()
await clearAllStorage() // Clears and reloads

Returns:

clearAllStorage

() => Promise<void>

Clear all prefixed storage and reload.

getStorageSnapshot

() => { localStorage_items, sessionStorage_items }

Get current storage state.

Components

Complete reference for all layer components.

Content Schemas

Zod schemas for every content collection.