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

Overview

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

useCwa() returns the singleton Cwa instance injected by the module plugin. In templates you can use $cwa directly. In <script setup> and composables, call useCwa().

// In <script setup>
const cwa = useCwa()

// In templates
$cwa.auth.signedIn.value

The Cwa class has six public sub-services, each documented on its own page:

Property	Class	Purpose
`cwa.resources`	`Resources`	Read-only view of fetched resource state
`cwa.resourcesManager`	`ResourcesManager`	CRUD operations on resources
`cwa.auth`	`Auth`	Authentication state and actions
`cwa.forms`	`Forms`	Form view state and error access
`cwa.admin`	`Admin`	Edit mode, component stack, admin panel
`cwa.siteConfig`	`SiteConfig`	Site-wide settings from the API

Top-Level Methods on `cwa`

These are lower-level fetch primitives. Most application code uses the composables instead.

// Fetch a specific resource by IRI
cwa.fetchResource({ path: '/component/titles/018e-...', isPrimary: false })

// Fetch the route manifest for a given Vue Router route
cwa.fetchRoute(route)

// Generic fetch (used internally)
cwa.fetch(event)

// Cancel the current primary page fetch
cwa.clearPrimaryFetch()

// Get the API Platform documentation (for component metadata)
await cwa.getApiDocumentation()
await cwa.getComponentMetadata(refresh, includePosition)

// Access the resolved API URL
cwa.apiUrlBase   // string

// Access the module's nuxt.config registrations
cwa.resourcesConfig    // the cwa.resources: {} config object
cwa.layoutsConfig      // the cwa.layouts: {} config object
cwa.pagesConfig        // the cwa.pages: {} config object
cwa.pageDataConfig     // the cwa.pageData: {} config object

Common Patterns

Auth-conditional rendering

Always wrap in <ClientOnly> — auth state is only available after client-side hydration:

<ClientOnly>
    <UserMenu v-if="$cwa.auth.signedIn.value" />
    <NuxtLink v-else to="/login">Sign in</NuxtLink>
</ClientOnly>

Accessing the current page title

const pageTitle = computed(() =>
    cwa.resources.pageData.value?.data?.title
    ?? cwa.resources.page.value?.data?.title
    ?? ''
)

Checking load state before rendering

const isReady = computed(() =>
    !cwa.resources.isLoading.value && !!cwa.resources.page.value?.data
)

A minimal flex-column layout shell used as a fallback when no layout component is resolved.

Resources