Client Only

ClientOnly delays browser-dependent content until the selected framework has mounted in the client. Use it for code that needs window, document, canvas, or a browser-only library and cannot run during server rendering.

Import

<script setup lang="ts">
import { ClientOnly } from '@destyler-ui/vue'
</script>

import { ClientOnly } from '@destyler-ui/react'

import { ClientOnly } from '@destyler-ui/solid'

<script lang="ts">
  import { ClientOnly } from '@destyler-ui/svelte/client-only'
</script>

Basic usage

<script setup lang="ts">
import { ClientOnly } from '@destyler-ui/vue'
</script>

<template>
  <ClientOnly>
    <p>Browser content</p>
    <template #fallback>
      <p>Waiting for the browser…</p>
    </template>
  </ClientOnly>
</template>

import { ClientOnly } from '@destyler-ui/react'

export function Example() {
  return (
    <ClientOnly fallback={<p>Waiting for the browser…</p>}>
      <p>Browser content</p>
    </ClientOnly>
  )
}

import { ClientOnly } from '@destyler-ui/solid'

export function Example() {
  return (
    <ClientOnly fallback={<p>Waiting for the browser…</p>}>
      <p>Browser content</p>
    </ClientOnly>
  )
}

<script lang="ts">
  import { ClientOnly } from '@destyler-ui/svelte/client-only'
</script>

{#snippet fallback()}
  <p>Waiting for the browser…</p>
{/snippet}

<ClientOnly {fallback}>
  <p>Viewport width: {window.innerWidth}px</p>
</ClientOnly>

The fallback is rendered during server rendering and remains visible until the framework mounts.

API

Prop	Type	Default	Description
Default content	Framework content or slot	—	Content rendered after the component mounts in the browser.
fallback	Framework content, prop, or slot	Nothing	Content rendered before the browser mount completes.