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 }).

<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 (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.

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:

ready

client 模式：跳过 SSR，仅在浏览器挂载后发起请求

<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