`<NuxtClientFallback>`

Nuxt provides a <NuxtClientFallback> component to render its content on the client if any of its children trigger an error in SSR.

This component is experimental and in order to use it you must enable the experimental.clientFallback option in your nuxt.config.

🧪 NuxtClientFallback is available on edge channel. Check out the Edge Channel Documentation to beta test.

Events

@ssr-error: Event emitted when a child triggers an error in SSR. Note that this will only be triggered on the server.
```
<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

  <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.

<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>

Edit on Github