CWA Logo
CWA 2 is a prerelease (2.0.0-alpha), heading for a beta. It runs production sites; configuration can still change between releases, always with upgrade notes. View versions and support
Cwa Api

The useCwa() API

The Cwa class — the central access point for resources, auth, forms, admin, and site config.
This section is the advanced reference. For components, layouts and forms, start with the composables, which call these services for you (see Which Composable?).

useCwa() returns the singleton Cwa instance injected by the module plugin. These docs follow one convention for reaching it:

  • In templates, use $cwa. It is available in every template without any import or declaration.
  • In <script setup> and composables, call useCwa() and name the variable cwa.
<script setup lang="ts">
const cwa = useCwa()
const siteName = computed(() => cwa.siteConfig.config.siteName)
</script>

<template>
  <UserMenu v-if="$cwa.auth.signedIn.value" />
</template>

Both names refer to the same object. Some return values are also named $cwa, such as the one from useCwaComponent() and the context a custom plugin receives, and the module's own source names its script variable $cwa. That works too, but don't declare a $cwa variable only to use it in the template: the global already covers that.

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

PropertyClassPurpose
cwa.resourcesResourcesRead-only view of fetched resource state
cwa.resourcesManagerResourcesManagerCRUD operations on resources
cwa.authAuthAuthentication state and actions
cwa.formsFormsForm view state and error access
cwa.adminAdminEdit mode, component stack, admin panel
cwa.siteConfigSiteConfigSite-wide settings from the API
cwa.orphanedResourcesOrphanedResourcesThe API's orphaned resource and file reports, scans and deletes. Admin only

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)

// Clear the primary fetch state, so page and layout resolve to nothing
// (the route middleware does this for `cwa: { disabled: true }` pages)
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

signedIn can be rendered on the server, but user, roles and isAdmin need <ClientOnly>. See Reading Auth State.

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
)

Resend Verify Email

Resend a verification email, with a countdown while the API is throttling resends.

Resources

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