mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs(api): add <ClientOnly>
to API docs (#8400)
This commit is contained in:
parent
b9d83b3cd1
commit
02227a2f1b
41
docs/content/3.api/2.components/1.client-only.md
Normal file
41
docs/content/3.api/2.components/1.client-only.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
description: The <ClientOnly> component renders its slot only in client-side.
|
||||
---
|
||||
# `<ClientOnly>`
|
||||
|
||||
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.
|
||||
|
||||
## Props
|
||||
|
||||
- **placeholderTag** | **fallbackTag**: specify a tag to be rendered server-side.
|
||||
- **placeholder** | **fallback**: specify a content to be rendered server-side.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
<ClientOnly fallback-tag="span" fallback="Loading comments...">
|
||||
<Comment />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Slots
|
||||
|
||||
- **#fallback**: specify a content to be displayed server-side.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<Sidebar />
|
||||
<ClientOnly>
|
||||
<!-- ... -->
|
||||
<template #fallback>
|
||||
<!-- this will be rendered on server side -->
|
||||
<p>Loading comments...</p>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
```
|
Loading…
Reference in New Issue
Block a user