Composables
useXFetch
Typed fetch wrapper that injects auth headers and exposes reactive loading and error state.
useXFetch
Enhanced fetch composable built on Nuxt's $fetch. Automatically injects the configured apiUrl base, attaches auth headers from the current session, and surfaces loading and error as reactive refs. Use this whenever you need a one-off request outside of the full CRUD lifecycle managed by useXCrud.
Usage
const { data, loading, error, execute } = useXFetch<User>("/api/me")
Returns
| Key | Type | Description |
|---|---|---|
data | Ref<T | null> | Reactive response data, populated after a successful call. |
loading | Ref<boolean> | true while the request is pending. |
error | Ref<Error | null> | Last caught error, or null when clear. |
execute | (overrideOptions?: FetchOptions) => Promise<T> | Triggers the fetch. Accepts optional per-call option overrides. |
Example
// Fetch current user profile on mount
const { data: profile, loading, execute } = useXFetch<UserProfile>("/api/me")
onMounted(() => execute())
// POST with a body
const { execute: submitReport } = useXFetch("/api/reports", {
method: "POST",
})
async function send(payload: ReportPayload) {
await submitReport({ body: payload })
}
AI Context
composable: useXFetch
package: "@xenterprises/nuxt-x-app"
use-when: >
One-off API calls that don't need full CRUD list management — profile fetches,
action endpoints, report submissions, or any request where you want reactive
loading/error state without the overhead of useXCrud.
pairs-with: XAState (for rendering loading/error feedback)