CWA 2 is a prerelease (2.0.0-alpha), heading for a beta. It runs production sites; configuration can still change between releases, always with upgrade notes. View versions and support
Component
useCwaCollectionResource
Composable for Collection-backed components — access paginated items, total pages, and page navigation.
Deprecated. Use
useCwaComponent(props, [withCollection()]) instead. This composable still works but may be removed in a future version.For Collection-backed components — wraps useCwaResource with pagination state.
import { toRef } from 'vue'
import type { IriProp } from '#cwa/composables/cwa-resource'
import { useCwaCollectionResource } from '#imports'
const props = defineProps<IriProp>()
const {
getResource,
exposeMeta,
collectionItems,
isLoadingCollection,
totalPages,
pageModel,
goToNextPage,
goToPreviousPage,
changePage
} = useCwaCollectionResource(toRef(props, 'iri'))
const resource = getResource()
defineExpose(exposeMeta)
Signature
useCwaCollectionResource(iri: Ref<string>, ops?: CwaResourceUtilsOps)
Same arguments as useCwaResource — a Ref<string> created via toRef(props, 'iri'), and the same options (styles, name, manager, autoClass).
Return Values
Everything useCwaResource returns, plus resource (already resolved, so you don't need to call getResource()) and the same values as the withCollection() plugin. See useCwaComponent › withCollection() for that table.
Example
<template>
<div>
<div v-for="item in collectionItems" :key="item['@id']">
{{ item.title }}
</div>
<div v-if="totalPages > 1">
<button @click="goToPreviousPage" :disabled="pageModel === 1">Prev</button>
<span>{{ pageModel }} / {{ totalPages }}</span>
<button @click="goToNextPage" :disabled="pageModel === totalPages">Next</button>
</div>
</div>
</template>
Collection members are raw API resources — read fields directly (item.title), not via .data (the .data wrapper only exists on the store-backed resource ref).