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.
Use in components backed by the built-in Collection API resource. Extends 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 |
exposeMeta | object | Pass to defineExpose |
collectionItems | ComputedRef<CwaResource[] | undefined> | The hydra:member items; undefined while the collection is loading |
isLoadingCollection | Ref<boolean> | True while the collection fetch is in progress |
totalPages | ComputedRef<number> | Total page count from hydra:totalItems / perPage |
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 |
Example
<template>
<div>
<div v-for="item in collectionItems" :key="item['@id']">
{{ item.data.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>
Numbered pagination
import { useCwaCollectionPagination } from '#imports'
const { pages } = useCwaCollectionPagination(totalPages, pageModel)
// pages: array of numbers and '...' strings for building a numbered page control