useCwaResourceRoute
useCwaResourceRoute turns a CWA resource into a link target.
import { useCwaResourceRoute } from '#imports'
const { getResourceRoute, getInternalResourceLink } = useCwaResourceRoute()
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.
Signature
useCwaResourceRoute()
It takes no parameters.
Return Values
| Return | Type | Purpose |
|---|---|---|
getResourceRoute | (resource, property: string) => string | RouteLocationRaw | The resource's own path from property, or the internal resource link when it has none |
getInternalResourceLink | (iri: string) => RouteLocationRaw | A route location for CWA's resource page, by IRI |
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.
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.