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.
Content
useContentConfig
Centralized content configuration and path resolution. All collection name/prefix/routing logic lives here.
const { collections, routing, getCollectionForRoute } = useContentConfig()
// Pre-resolved collection names
collections.docs // e.g., 'docs'
collections.pages // e.g., 'pages'
// Routing paths
routing.sources // e.g., '/sources'
routing.offers // e.g., '/offers'
// Dynamic resolution
const collection = getCollectionForRoute('/docs/getting-started')
Returns:
collections
Record<string, string>
Pre-resolved collection name map.
routing
Record<string, string>
Pre-resolved routing paths.
getCollectionName
(key, fallback?) => string
Get collection name by key.
getCollectionPrefix
(key, fallback?) => string
Get collection URL prefix.
getCollectionBackLabel
(key, fallback?) => string
Get back-link label.
getRoutingPath
(key, fallback) => string
Get routing path by key.
getSearchableCollections
() => string[]
Get searchable collection names.
getRoutePatterns
() => RoutePatternConfig[]
Build route patterns from prefixes.
getCollectionForRoute
(path) => string
Map a route path to its collection.
resolveInternalPath
(path, collection?) => string
Resolve path with collection prefix.
flattenNavigation
(items?) => ContentNavigationItem[]
Flatten nav tree.
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.
Social
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.
share
(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.