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.

DraftComponent

useCwaResource

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

The most-used composable. Every display component uses this to fetch its data and wire into the admin manager.

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
      classes: Record<string, string[]>
    }
    name?: string            // for ui/ variant files — must match filename without .vue
    disableManager?: boolean // skip admin manager integration
  }
)

First argument is a Ref<string> — use toRef(props, 'iri') to convert the iri prop to a ref.

Return values

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

Return	Type	Purpose
`getResource`	`() => Ref<Resource \| null \| 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

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 — loading (show skeleton)
null — not found
object — data available

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

Style Variants

const { getResource, exposeMeta, getCurrentStyleName } = useCwaResource(toRef(props, 'iri'), {
  styles: {
    multiple: false,
    classes: {
      'Default': [],
      'Filled': ['bg-blue-600 text-white px-6 py-2 rounded-md'],
      'Outlined': ['border border-blue-600 text-blue-600 px-6 py-2 rounded-md'],
    }
  }
})
const resource = getResource()
const currentStyleName = computed(() => {
  if (!resource.value?.data) return undefined
  return getCurrentStyleName(resource.value.data)
})

The style names appear as options in the admin manager. resource.value.data.uiClassNames holds the selected classes — bind it to the element you want styled.

UI Variant Files

For a ui/ directory alternative template, pass name matching the filename:

// app/cwa/components/NavigationLink/ui/YouTube.vue
const { getResource, exposeMeta } = useCwaResource(toRef(props, 'iri'), {
  name: 'YouTube'
})

See Alternative UI Variants for the full pattern.

Complete Example

<template>
  <h1 :class="resource?.data?.uiClassNames">
    {{ 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>

The useCwa() API

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

Collection Resource

Composable for Collection-backed components — access paginated items, total pages, and page navigation.