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 produce a link target for 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)`

Reads the given property off the resource — typically 'routePath' — and returns it as the link target. When that property is empty (an unpublished item with no route yet, say) it falls back to getInternalResourceLink(resource['@id']), so the item is still linkable.

const to = getResourceRoute(post, 'routePath')
// '/blog/my-first-post' — or the internal resource route object when routePath is empty

property is required — there is no @id default.

`getInternalResourceLink(iri)`

Returns a Vue Router location object targeting CWA's catch-all resource page. No lookup happens — the IRI is passed straight through as a route param:

const to = getInternalResourceLink('/page-data/blog-articles/018e-…')
// to → { name: '_cwa-resource-page', params: { cwaPage0: '/page-data/blog-articles/018e-…' } }

Pass it straight to :to on <NuxtLink> / <CwaLink> — don't interpolate it as a string.

The same applies to programmatic navigation: use navigateTo(getInternalResourceLink(iri)), never navigateTo(iri). The cwaPage0 param exists only on the /_cwa/:cwaPage0 route, so a bare IRI string instead matches one of the module's catch-alls (/, /:cwaPage1, …) with no cwaPage0 at all. The fetcher then requests /_/routes/ plus the whole IRI — a primary fetch that can only 404, taking over the screen while the URL stays put.

Usage in a Collection

import { useCwaComponent, withCollection, useCwaResourceRoute } from '#imports'

const { collectionItems } = useCwaComponent(props, [withCollection()])
const { getResourceRoute } = useCwaResourceRoute()

<CwaLink
    v-for="item in collectionItems"
    :key="item['@id']"
    :to="getResourceRoute(item, 'routePath')"
>
    {{ item.title }}
</CwaLink>

Collection members are raw API resources, so read their fields directly (item.title) rather than via .data. withCollection() already exposes this helper as resolveResourceLink, so inside a collection component you don't need to call useCwaResourceRoute() yourself.

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 useCwaComponent and withFile(), manage uploads in admin tabs with useCwaResourceUpload, and use Imagine filter variants.