---
title: "useClientApiFetch"
description: "Client-only API request composable, suitable for non-SEO-sensitive data."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/api/use-client-api-fetch"
---
# useClientApiFetch

> Client-only API request composable, suitable for non-SEO-sensitive data.

## Usage

Use the auto-imported `useClientApiFetch` composable for client-only API requests. Equivalent to `useApiFetch(url, { ...options, server: false, lazy: true })`.

```vue
<script setup lang="ts">
interface UserPreferences {
  theme: 'light' | 'dark'
  language: string
  notifications: boolean
}

// Auto-execute on the client (request fires automatically after hydration)
const { data, pending } = useClientApiFetch<UserPreferences>('/user/preferences')

// Manually control execution timing (with immediate: false)
const { data: profile, execute } = useClientApiFetch<User>('/user/profile', {
  immediate: false
})
onMounted(() => execute())
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else>{{ data }}</div>
</template>
```

- `useClientApiFetch` inherits all features of [`useApiFetch`](https://nuxt.mhaibaraai.cn/docs/api/use-api-fetch) (auth, Toast, business status code checking, etc.).
- Presets `server: false` + `lazy: true` — requests do not block navigation and execute only on the client.
- By default, fires automatically after hydration. Pass `immediate: false` for manual control.

> [!WARNING]
> 
> Due to 
> 
> server: false
> 
> , there is no data during SSR. On initial render 
> 
> data
> 
>  is 
> 
> null
> 
> ; use 
> 
> pending
> 
>  or 
> 
> status
> 
>  to manage the loading state.

## Example

Skips SSR; the request fires only after browser hydration. `data` is `null` on initial render during SSR:

```vue [ApiQuickstartClientExample.vue]
<script setup lang="ts">
interface Profile {
  id: string
  name: string
  email: string
}

const { data, pending, error, refresh } = useClientApiFetch<Profile>('/profile')
</script>

<template>
  <div class="flex flex-col gap-3">
    <div class="flex items-center gap-2 flex-wrap">
      <UBadge v-if="pending" color="warning" variant="subtle">
        pending
      </UBadge>
      <UBadge v-else-if="error" color="error" variant="subtle">
        error
      </UBadge>
      <UBadge v-else color="success" variant="subtle">
        ready
      </UBadge>
      <UButton size="sm" variant="outline" icon="i-lucide-refresh-cw" @click="refresh()">
        刷新
      </UButton>
    </div>
    <p class="text-xs text-muted">
      client 模式：跳过 SSR，仅在浏览器挂载后发起请求
    </p>
    <pre class="text-xs p-3 rounded bg-elevated overflow-auto">{{ error ? { error: error.message } : data }}</pre>
  </div>
</template>
```

## API

### useClientApiFetch()

`useClientApiFetch<T = unknown, DataT = T>(url: string | (() => string), options?: UseApiFetchOptions<T, DataT>): UseApiFetchReturn<DataT>`

Creates a client-only API request.

#### Parameters

**url** (`string | (() => string)`) *required*: Request URL or a function returning the URL.

**options** (`UseApiFetchOptions<T, DataT>`): Request configuration options. See useApiFetch for the full option reference.The following options are forced and cannot be overridden via options:server: false — Disables server-side executionlazy: true — Enables lazy mode (does not block navigation)

#### Type Parameters

Same as [`useApiFetch`](https://nuxt.mhaibaraai.cn/docs/api/use-api-fetch#type-parameters).

#### Returns

Same return value as [`useApiFetch`](https://nuxt.mhaibaraai.cn/docs/api/use-api-fetch#returns).

## Changelog

See commit history for [src/runtime/composables/useClientApiFetch.ts](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/composables/useClientApiFetch.ts).


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.