mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-28 08:32:06 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
66 lines
2.0 KiB
Markdown
66 lines
2.0 KiB
Markdown
---
|
|
title: "<NuxtClientFallback>"
|
|
description: "Nuxt provides `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR"
|
|
links:
|
|
- label: Source (client)
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/client-fallback.client.ts
|
|
size: xs
|
|
- label: Source (server)
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/client-fallback.server.ts
|
|
size: xs
|
|
---
|
|
|
|
::callout{to="/docs/guide/going-further/experimental-features#clientfallback"}
|
|
This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
|
|
::
|
|
|
|
## 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`
|
|
- `keepFallback`: Keep the fallback content if it failed to render server-side.
|
|
- **type**: `boolean`
|
|
- **default**: `false`
|
|
|
|
```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>
|
|
```
|
|
|