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.
DraftComponent
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>, options?: CollectionOptions)
Same first argument as useCwaResource — a Ref<string> created via toRef(props, 'iri').
Return values
| Return | Type | Purpose |
|---|---|---|
getResource | () => Ref<Resource> | Same as in useCwaResource |
resource | ComputedRef<Resource | undefined> | The resource ref, already resolved — you do not need to call getResource() |
exposeMeta | object | Pass to defineExpose |
collectionItems | ComputedRef<CwaResource[] | undefined> | The collection's member array; undefined while the collection is loading |
isLoadingCollection | Ref<boolean> | True while the collection fetch is in progress |
totalPages | Ref<number> | Page count parsed from the collection's view.last link (?page=N); falls back to 1 when the response has no view.last |
pageModel | Ref<number> | Current page number; set it to navigate |
goToNextPage() | () => void | Increment page; clamped at totalPages |
goToPreviousPage() | () => void | Decrement page; clamped at 1 |
changePage(n) | (n: number) => void | Jump to page n |
resolveResourceLink | (resource, property) => RouteLocation | string | Link target for a collection item — see useCwaResourceRoute |
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).
Numbered pagination
useCwaCollectionPagination takes a single props object, so it is designed for a dedicated pagination component that receives currentPage, totalPages and maxPagesToDisplay as props:
import { useCwaCollectionPagination } from '#imports'
const props = defineProps<{ currentPage: number, totalPages: number, maxPagesToDisplay: number }>()
const { pages } = useCwaCollectionPagination(props)
// pages: ComputedRef<number[]> — a contiguous window of page numbers centred on currentPage
// (at most maxPagesToDisplay, defaulting to 7 when 0/undefined). There are no '...' entries —
// render your own first/last affordances if you want them.