Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

Commit 2644d7e

Browse files
committed
docs(api): add <ClientOnly>
1 parent b9d83b3 commit 2644d7e

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
description: The <ClientOnly> component renders its slot only in client-side.
3+
---
4+
# `<ClientOnly>`
5+
6+
The `<ClientOnly>` component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin.
7+
8+
## Props
9+
10+
- **placeholderTag** | **fallbackTag**: specify a tag to be rendered server-side.
11+
- **placeholder** | **fallback**: specify a content to be rendered server-side.
12+
13+
```vue
14+
<template>
15+
<div>
16+
<Sidebar />
17+
<ClientOnly fallback-tag="span" fallback="Loading comments...">
18+
<Comment />
19+
</ClientOnly>
20+
</div>
21+
</template>
22+
```
23+
24+
## Slots
25+
26+
- **#fallback**: specify a content to be displayed server-side.
27+
28+
```vue
29+
<template>
30+
<div>
31+
<Sidebar />
32+
<ClientOnly>
33+
<!-- ... -->
34+
<template #fallback>
35+
<!-- this will be rendered on server side -->
36+
<p>Loading comments...</p>
37+
</template>
38+
</ClientOnly>
39+
</div>
40+
</template>
41+
```

0 commit comments

Comments
 (0)