Composables
useXCrud
Manages full CRUD lifecycle for a REST endpoint with reactive items list, loading state, and error handling.
useXCrud
Full CRUD lifecycle composable for a REST endpoint. Pass an API path and get back a reactive items list alongside create, update, remove, and fetch methods — each automatically managing loading and error state. Pairs directly with XATable and XACrudModal components.
Usage
const { items, loading, error, fetch, create, update, remove } = useXCrud("/api/users")
Returns
| Key | Type | Description |
|---|---|---|
items | Ref<T[]> | Reactive array of fetched records. |
loading | Ref<boolean> | true while any async operation is in flight. |
error | Ref<Error | null> | Last caught error, or null when clear. |
fetch | (params?: Record<string, unknown>) => Promise<void> | Fetches (or re-fetches) the full list from the endpoint. |
create | (payload: Partial<T>) => Promise<T> | POSTs a new record and appends it to items. |
update | (id: string | number, payload: Partial<T>) => Promise<T> | PATCHes an existing record and updates items in place. |
remove | (id: string | number) => Promise<void> | DELETEs a record and removes it from items. |
Example
// pages/users.vue
const { items, loading, create, update, remove } = useXCrud("/api/users")
const { success, error: toast } = useXToast()
await fetch()
async function deleteUser(id: string) {
await remove(id)
success("User deleted")
}
async function saveUser(payload: Partial<User>) {
payload.id ? await update(payload.id, payload) : await create(payload)
success("Saved")
}
AI Context
composable: useXCrud
package: "@xenterprises/nuxt-x-app"
use-when: >
Any page that needs to list, create, edit, or delete records from a REST endpoint.
Eliminates boilerplate loading/error state and keeps the items list in sync
after mutations without a manual refetch.
pairs-with: XATable, XACrudModal, XABulkAction, XADataTable