useCwaResourceRoute

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.

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.