`<ClientOnly>`

Renders its slot only on the client, skipping server-side rendering.

Since Nuxt 3.0 Spec ↗

Syntax

<ClientOnly> ... </ClientOnly>

Parameters

Name	Type	Required	Description
`fallback`	`string`	No	Tag name for placeholder rendered on the server.
`fallbackTag`	`string`	No	Element to render server-side while the client content loads.

Returns

Component — Client-rendered slot with optional SSR fallback.

Examples

<template>
  <ClientOnly>
    <BrowserOnlyChart />
  </ClientOnly>
</template>

<template>
  <ClientOnly fallback-tag="span" fallback="Loading map...">
    <InteractiveMap />
  </ClientOnly>
</template>

<template>
  <ClientOnly>
    <Comments />
    <template #fallback>
      <p>Loading comments...</p>
    </template>
  </ClientOnly>
</template>

Notes

Use for components that depend on browser-only APIs (window, certain third-party libs) to avoid SSR hydration mismatches. The default slot renders only after mount; provide a `#fallback` or `fallback` prop for what the server emits in the meantime.