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

Component

useCwaResource

Bind a display component to its API resource by IRI — fetch, subscribe, and expose to the admin manager.

Low-level composable that fetches resource data and wires into the admin manager. For display components, prefer useCwaComponent — it wraps this composable and adds a plugin system for collections, images, and custom behaviour.

import { toRef } from 'vue'
import type { IriProp } from '#cwa/composables/cwa-resource'
import { useCwaResource } from '#imports'

const props = defineProps<IriProp>()

const { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'))
const resource = getResource()

defineExpose(exposeMeta)

Signature

useCwaResource(
  iri: Ref<string>,
  options?: {
    styles?: {
      multiple?: boolean     // default: single select
      // each style's value is a class string (string[] accepted but deprecated)
      classes: Record<string, string | string[]>
    }
    name?: string            // display label in the admin "UI" selector (does not need to match the filename)
    manager?: {
      disabled?: boolean     // skip admin manager integration
    }
    autoClass?: boolean      // default true — auto-applies uiClassNames to the root element
  }
)

Parameters

Parameter	Type	Description
`iri`	`Ref<string>`	The component's IRI as a ref. Use `toRef(props, 'iri')` to convert the `iri` prop
`options.styles`	object	Style variants. See Style Variants
`options.name`	`string`	The label in the admin "UI" selector. See UI Variant Files
`options.manager.disabled`	`boolean`	Skip the admin manager integration
`options.autoClass`	`boolean`	Apply `uiClassNames` to the root element. Default `true`

Return Values

const { getResource, exposeMeta, $cwa, getCurrentStyleName } = useCwaResource(iriRef)

Return	Type	Purpose
`getResource`	`() => ComputedRef<CwaCurrentResourceInterface \| undefined>`	Call it once in setup to get the resource ref
`exposeMeta`	object	Pass directly to `defineExpose`
`$cwa`	CwaComposable	Access to auth, resources, UI state
`getCurrentStyleName`	`(data) => string \| undefined`	Read the currently selected style name
`uiClassNames`	`ComputedRef<string[] \| undefined>`	The active style classes — auto-applied to the root element by default

const resource = getResource() — call getResource() once to get the reactive resource ref. Never call it in a computed or template — call it once in setup().

resource.value?.data?.title — access your PHP entity fields on .data.

resource.value states:

undefined — the store has no entry for this IRI yet (show skeleton)
object without data — the fetch is in progress or failed (apiState.status says which)
object with data — data available

defineExpose(exposeMeta) is required — without it the admin manager cannot find and select this component.

Example

<template>
  <h1>{{ resource?.data?.title }}</h1>
</template>

<script setup lang="ts">
import { toRef } from 'vue'
import type { IriProp } from '#cwa/composables/cwa-resource'
import { useCwaResource } from '#imports'

const props = defineProps<IriProp>()
const { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'))
const resource = getResource()
defineExpose(exposeMeta)
</script>

Style Variants

The styles option works exactly as it does on useCwaComponent: a map of style name to class string, applied to the root element unless you pass autoClass: false. See useCwaComponent › Style variants for the full reference, including several styles at once and how uiClassNames is stored.

UI Variant Files

For a ui/ directory alternative template, the name option sets the label shown in the admin "UI" selector. It does not need to match the filename — it's purely cosmetic. Without it, the selector falls back to the raw component name.

// app/app/cwa/components/NavigationLink/ui/YouTube.vue
const { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'), {
  name: 'YouTube'   // optional display label for the admin UI selector
})

See Alternative UI Variants for the full pattern.

Component (recommended)

The recommended entry point for all CWA display components — fetch resource data, expose to the admin manager, and compose plugins for collections, uploaded files, or custom behaviour.

File Field

Resolve a single uploadable file field on a resource — content URL, display media, load state, and Imagine filter variants — named at the call site.