Client Only for Vue

Render content only on the client side.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

<script setup lang="ts">
import { ClientOnly } from "@/components/ui/client-only";
</script>

<template>
  <ClientOnly>
    <div class="rounded-xl border bg-muted px-4 py-3 text-foreground text-sm">
      This content is only rendered on the client side.
    </div>
  </ClientOnly>
</template>

Demos

Fallback

PreviewCode

API Reference

ClientOnly

data-slot="client-only"

PropType

childrenVNode | (() → VNode)

What renders once it's mounted in the browser: nodes, or a function that returns them.

Type: VNode | (() → VNode)

fallback?VNode

What renders on the server and until it mounts.

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.