Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 1.77 KB

1.nuxt-client-fallback.md

File metadata and controls

61 lines (48 loc) · 1.77 KB
Raw
title description
<NuxtClientFallback>
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. ::

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
  • keepFallback: Keep the fallback content if it failed to render server-side.
    • type: boolean
    • default: false
  <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>