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

useCwaImageResource

Extends useCwaResource for components with file uploads — adds image URL, load state, and Imagine filter variants.

Drop-in replacement for useCwaResource when your PHP component uses #[Silverback\Uploadable].

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

const props = defineProps<IriProp>()

const {
  getResource,
  exposeMeta,
  contentUrl,
  displayMedia,
  loaded,
  handleLoad
} = useCwaImageResource(toRef(props, 'iri'), {
  imagineFilterName: 'thumbnail'
})

const resource = getResource()
defineExpose(exposeMeta)

Signature

useCwaImageResource(
  iri: Ref<string>,
  options?: {
    imagineFilterName?: string   // which Imagine filter to use as contentUrl
  }
)

imagineFilterName — the name of the LiipImagineBundle filter to apply (e.g. 'thumbnail', 'hero'). If omitted, contentUrl is the raw uploaded file URL.

Return values

Return	Type	Purpose
`getResource`	`() => Ref<Resource>`	Same as `useCwaResource`
`exposeMeta`	object	Pass to `defineExpose`
`contentUrl`	`ComputedRef<string \| undefined>`	URL of the (optionally filtered) image
`loaded`	`Ref<boolean>`	Becomes `true` when `handleLoad()` is called
`displayMedia`	`ComputedRef<boolean>`	`true` when `contentUrl` is set AND image has loaded
`handleLoad`	`() => void`	Call on the `<img>` element's `@load` event

Example

<template>
  <Transition name="fade">
    <NuxtImg
      v-if="displayMedia"
      :src="contentUrl"
      @load="handleLoad"
    />
  </Transition>
  <div v-else class="skeleton h-48 w-full bg-gray-200 animate-pulse" />
</template>

The displayMedia computed ensures the skeleton shows until the actual image has loaded in the browser.

Accessing multiple Imagine variants

The raw media objects are available on the resource:

const resource = getResource()

// resource.value._metadata.mediaObjects.file.thumbnail.contentUrl
// resource.value._metadata.mediaObjects.file.hero.contentUrl

Call useCwaImageResource with different imagineFilterName options, or access _metadata.mediaObjects directly for the full map.

Collection Resource

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

Form

Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.