Nuxt/docs/3.api/2.components/1.nuxt-client-fallback.md

60 lines
1.7 KiB
Markdown
Raw Normal View History

---
title: "<NuxtClientFallback>"
description: "Nuxt provides `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR"
---
# `<NuxtClientFallback>`
Nuxt provides a `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
::alert{type=warning}
This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
::
:StabilityEdge{title=NuxtClientFallback}
## Events
- **`@ssr-error`**: Event emitted when a child triggers an error in SSR. Note that this will only be triggered on the server.
```vue
<template>
<NuxtClientFallback @ssr-error="logSomeError">
<!-- ... -->
</NuxtClientFallback>
</template>
```
## Props
- **placeholderTag** | **fallbackTag**: Specify a fallback tag to be rendered if the slot fails to render.
- **type**: `string`
- **default**: `div`
- **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
- **type**: `string`
```vue
<template>
<!-- render <span>Hello world</span> server-side if the default slot fails to render -->
<NuxtClientFallback fallback-tag="span" fallback="Hello world">
<BrokeInSsr />
</NuxtClientFallback>
</template>
```
## Slots
- **#fallback**: specify content to be displayed server-side if the slot fails to render.
```vue
<template>
<NuxtClientFallback>
<!-- ... -->
<template #fallback>
<!-- this will be rendered on server side if the default slot fails to render in ssr -->
<p>Hello world</p>
</template>
</NuxtClientFallback>
</template>
```