The CWA is in heavy development

The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.

DraftCwa Api

cwa.resources

The read-only store view — page, pageData, layout, arbitrary resource lookup, and loading state.

The read-only store view. Most values are ComputedRef — they react to resource fetches automatically.

Two exceptions worth knowing before you write .value anywhere:

page, pageData and displayPage are ComputedRef | undefined — the getter returns undefined while its IRI is unresolved, so optional-chain the getter itself: cwa.resources.page?.value.
currentIds, currentResources, isIriPublishableEquivalent() and findAllPublishableIris() return plain values, not refs — no .value.

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> | undefined
cwa.resources.pageIri       // ComputedRef<string | undefined>

cwa.resources.pageData      // ComputedRef<CwaCurrentResourceInterface | undefined> | undefined — defined on data pages only
cwa.resources.pageDataIri   // ComputedRef<string | undefined>

cwa.resources.displayPage   // ComputedRef | undefined — the "identity" page shown in the admin (pageData for data pages, page otherwise)
cwa.resources.displayPageIri

The three resource getters return undefined (not a ref) until their IRI resolves — always optional-chain them.

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> — usesPageTemplate && a pageData record is active
cwa.resources.isDynamicPage      // ComputedRef<boolean> — usesPageTemplate && NO pageData record

isDataPage and isDynamicPage are mutually exclusive: a page marked isTemplate either has an active PageData record (isDataPage) or is being rendered without one (isDynamicPage).

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

Overview

The Cwa class — the central access point for resources, auth, forms, admin, and site config.

Resources Manager

CRUD operations on resources — create, update, delete, save, and error management.