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.
DraftUtilities
useQueryBoundModel
Binds a reactive ref to a URL query parameter — changes update the URL; URL changes update the ref.
import { useQueryBoundModel } from '#imports'
const sortOrder = useQueryBoundModel('order[createdAt]', 'desc')
useQueryBoundModel returns a writable Ref that stays in sync with a URL query parameter. When you write to the ref, the URL updates (triggering a collection re-fetch). When the user navigates with a query string (e.g. a shared link), the ref reads from the URL.
Parameters
| Parameter | Type | Description |
|---|---|---|
queryParam | string | The query parameter key (e.g. 'page', 'order[createdAt]') |
defaultValue | string | string[] | null | Value used when the parameter is absent from the URL |
Usage with Collections
Use it to let visitors control sorting and filtering on collection components:
import { useCwaCollectionResource, useQueryBoundModel } from '#imports'
const { collectionItems, totalPages, pageModel } = useCwaCollectionResource(toRef(props, 'iri'))
// Bind sort order to URL
const sortOrder = useQueryBoundModel('order[createdAt]', 'desc')
<select v-model="sortOrder">
<option value="desc">Newest first</option>
<option value="asc">Oldest first</option>
</select>
Changing sortOrder updates the URL to ?order[createdAt]=asc, which triggers the collection component's resource to re-fetch with the new parameter. The default query parameters set on the PHP Collection entity are the baseline; useQueryBoundModel lets visitors override them.
Array Values
Pass an array as defaultValue to support multi-value parameters:
const selectedTags = useQueryBoundModel('tags[]', [])