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.

DraftUtilities

useCwaResourceRoute

Resolve the URL path for a CWA resource — convert an IRI to the route it lives at.

import { useCwaResourceRoute } from '#imports'

const { getResourceRoute, getInternalResourceLink } = useCwaResourceRoute()

useCwaResourceRoute returns helpers that look up the Nuxt route corresponding to a CWA resource. Use it when you need to link to a resource's page — for example in a collection list where each item should link to its own detail page.

Methods

`getResourceRoute(resource, property?)`

Returns the Vue Router route object for the given resource. Looks up the Route entity whose PageData IRI matches the resource.

const route = getResourceRoute(item)
// route → { path: '/blog/my-first-post', ... }

Pass property to match on a specific IRI property of the resource instead of its @id.

`getInternalResourceLink(iri)`

Returns the path string for the given IRI:

const path = getInternalResourceLink('/page-data/blog-articles/018e-...')
// path → '/blog/my-first-post'

Usage in a Collection

import { useCwaCollectionResource, useCwaResourceRoute } from '#imports'

const { collectionItems } = useCwaCollectionResource(toRef(props, 'iri'))
const { getInternalResourceLink } = useCwaResourceRoute()

<NuxtLink
    v-for="item in collectionItems"
    :key="item['@id']"
    :to="getInternalResourceLink(item['@id'])"
>
    {{ item.data.title }}
</NuxtLink>

Query Model

Binds a reactive ref to a URL query parameter — changes update the URL; URL changes update the ref.

Images & Media

Display uploaded files with useCwaImageResource, manage uploads in admin tabs with useCwaResourceUpload, and use Imagine filter variants.