cwa.resources
The read-only store view. All values are ComputedRef — they react to resource fetches automatically.
cwa.resources exposes two complementary families of page/pageData getters. Understanding the difference is important for using them correctly:
| Family | Getters | What they return | Requires manifest? | Use for |
|---|---|---|---|---|
| Flat leaf | pageIri, pageDataIri, page, pageData | The page/pageData at the leaf of the current URL — i.e. the innermost, deepest target of the route | No | SEO meta, admin identity, reading article data |
| Depth-aware | pageIriAtDepth(n), pageDataIriAtDepth(n), pageAtDepth(n), pageDataAtDepth(n) | The page/pageData at a specific rendering depth from the manifest | Depths > 0 require a manifest | <CwaPage /> rendering, layout-level access |
The flat leaf getters follow the fetch path to the deepest resource — for a URL like /events/2024/conference, pageIri resolves to the innermost page. The depth-aware methods read the manifest's irisByDepth array — pageIriAtDepth(0) is the outermost page, pageIriAtDepth(2) is two levels deep. These families are complementary, not interchangeable.
Layout
cwa.resources.layout // ComputedRef<CwaCurrentResourceInterface | undefined>
cwa.resources.layoutIri // ComputedRef<string | undefined>
Layout always comes from the depth-0 page regardless of nesting depth.
Flat Leaf Getters
Use these when you need to know what the current URL is about — the page or article the visitor navigated to. They work without a manifest (no pagesDepth requirement) and are what the SEO plugin uses to populate <title> and <meta> tags.
cwa.resources.page // ComputedRef<CwaCurrentResourceInterface | undefined>
cwa.resources.pageIri // ComputedRef<string | undefined>
cwa.resources.pageData // ComputedRef<CwaCurrentResourceInterface | undefined> — defined on dynamic pages only
cwa.resources.pageDataIri // ComputedRef<string | undefined>
cwa.resources.displayPage // ComputedRef — the "identity" page shown in the admin (pageData for dynamic pages, page otherwise)
cwa.resources.displayPageIri
Typical use — reading article data in a page template:
const cwa = useCwa()
const headline = computed(() => cwa.resources.pageData.value?.data?.headline)
const title = computed(() => cwa.resources.pageData.value?.data?.title ?? cwa.resources.page.value?.data?.title)
Page Type Flags
cwa.resources.usesPageTemplate // ComputedRef<boolean> — true when the page is marked isTemplate
cwa.resources.isDataPage // ComputedRef<boolean> — true when a pageData record is active
cwa.resources.isDynamicPage // ComputedRef<boolean> — isDataPage && usesPageTemplate
Depth-Aware Methods
Use these when you need to know what renders at a specific nesting level. They read manifest.irisByDepth[n]. At depth 0 they fall back gracefully to the flat fetch path, but at depth 1 and beyond a manifest is required.
These are used internally by <CwaPage /> to pass the correct IRI to each nesting level — you rarely call them with an explicit depth outside of <CwaPage /> itself.
cwa.resources.depthCount // ComputedRef<number> — number of depth levels in the manifest (minimum 1)
cwa.resources.pageAtDepth(0) // ComputedRef — outermost page resource
cwa.resources.pageAtDepth(1) // ComputedRef — first nested page resource
cwa.resources.pageIriAtDepth(0) // ComputedRef<string | undefined>
cwa.resources.pageDataAtDepth(0) // ComputedRef — pageData at a given depth
cwa.resources.pageDataIriAtDepth(0) // ComputedRef<string | undefined>
Calling without an argument — inside a component rendered by <CwaPage />, omit the depth. The component injects cwa-page-own-depth and the method resolves to the correct level automatically:
// Inside a page template component rendered by <CwaPage /> — no depth arg needed
const pageIri = cwa.resources.pageIriAtDepth() // resolves to own depth
const pageDataIri = cwa.resources.pageDataIriAtDepth() // resolves to own depth
const page = cwa.resources.pageAtDepth()
const pageData = cwa.resources.pageDataAtDepth()
Inject keys provided by <CwaPage />:
| Key | Type | What it contains |
|---|---|---|
cwa-page-own-depth | number | The depth at which the current template is rendered |
cwa-page-depth | number | The depth for a nested <CwaPage /> child (incremented automatically) |
cwa-page-data-iri | ComputedRef<string | undefined> | IRI of the PageData record at the current depth |
cwa-page-data-iri is the most convenient way to access PageData in a template component — no depth arithmetic needed:
import { inject } from 'vue'
import type { ComputedRef } from 'vue'
const pageDataIri = inject<ComputedRef<string | undefined>>('cwa-page-data-iri')
const eventData = computed(() => {
if (!pageDataIri?.value) return null
return cwa.resources.getResource(pageDataIri.value).value
})
Arbitrary Resource Lookup
// Fetch any resource by IRI (returns a ComputedRef tracking that IRI)
const resource = cwa.resources.getResource('/component/titles/018e-...')
resource.value?.data?.title
// All resources currently loaded for this page
cwa.resources.currentResources // { [iri: string]: CwaCurrentResourceInterface }
cwa.resources.currentIds // string[] — IRI list for current page
// Find a component group by its reference name
cwa.resources.getComponentGroupByReference('navigation')
Loading State
cwa.resources.isLoading // ComputedRef<boolean> — true during any primary fetch
cwa.resources.pageLoadProgress // ComputedRef<{ total, complete, percent, resources[] }>
Publishable Helpers
cwa.resources.findPublishedComponentIri(iri) // → published IRI for this draft
cwa.resources.findDraftComponentIri(iri) // → draft IRI for this published resource
cwa.resources.isIriPublishableEquivalent(a, b) // → true when a and b are draft/publish twins
cwa.resources.findAllPublishableIris(iri) // → both IRIs for a publishable resource