Composables and utils
This page lists the composables and utils your components use to read the site's content. It is for app developers. Set up the layer first: Overview.
Composables
These composables are auto-imported in every app that extends the layer.
| Composable | Signature | Returns |
|---|---|---|
useConfig | () => AsyncData | The config document (or its locale-suffixed equivalent), re-fetched when the content locale changes. |
useCurrentPage | () => AsyncData | The pages document matching the current route, with the locale prefix stripped. |
useNavigation | (tags?: string[]) => AsyncData | config.navigation, filtered to entries sharing at least one tag when tags is given. |
useContentLocale | () => { locale, defaultLocale, stripLocalePrefix, localizePath } | Locale helpers (below). |
useLocaleAlternates | () => void | Adds hreflang tags. app.vue calls it, see Languages and hreflang. |
useCurrentPage runs no content query on routes that content does not serve. Those are the pages a module
registers with addModulePages, such as /account/**, /admin/** and the sign-in pages, and any page that sets
definePageMeta({ content: false }). data is null there. Answers are reused when a path is visited again, and
refresh() asks the content database.
const { data: config } = await useConfig()
const { data: page } = useCurrentPage()
const { data: footerNavigation } = useNavigation(['footer'])
const { locale, defaultLocale, stripLocalePrefix, localizePath } = useContentLocale()
useContentLocale property | Type | Description |
|---|---|---|
locale | ComputedRef<string | undefined> | The current locale, only when it is one of the app's configured codes; otherwise undefined. |
defaultLocale | ComputedRef<string | undefined> | The default locale reported by $i18n. |
stripLocalePrefix | (path: string) => string | Removes the current locale prefix (/en/services gives /services). |
localizePath | (path: string, targetLocale: string) => string | The equivalent of path for targetLocale. Used instead of switchLocalePath, which cannot resolve the layer's landing and catch-all routes. |
Utils
These content utils are auto-imported too, from shared/utils/content.ts through app/utils.ts.
// 'pages' + 'no' => 'pages_no'; name unchanged when locale is omitted.
function localizedCollectionName<Name extends string>(name: Name, locale?: string): Name
// A string returns itself; an object returns prop[key].
function stringOrPropValue<Prop extends Record<string, unknown>>(
prop: string | undefined | Prop,
key: Prop extends string ? string : keyof Prop,
): unknown
// Locale codes from an `i18n.locales` config (strings or `{ code }` objects).
function getAvailableLocales(config: { i18n?: { locales?: Array<string | { code: string }> } }): string[]
// The `pages` collection(s) to query: the locale's own when it is available, every locale's otherwise,
// or ['pages'] when no locales are configured.
function getCollectionsToQuery(locale: string | undefined, availableLocales: string[]): string[]
// The `pages` collection for a route path, from its first segment.
function getCollectionFromPath(path: string, availableLocales: string[]): string
landingPageExists(rootDir) in utils/pages.ts is a build-time helper for the routing module, not for apps.
Next steps
- Content collections – the fields
useConfiganduseCurrentPagereturn. - Local development – run the Frigear website, which uses these composables.