<NuxtClientFallback>

Source (client)Source (server)
Nuxt 提供 `<NuxtClientFallback>` 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容

Nuxt 提供 <NuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容。

该组件为实验性功能，使用前必须在你的 nuxt.config 中启用 experimental.clientFallback 选项。
app/pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- 该组件将在客户端渲染 -->
    <NuxtClientFallback fallback-tag="span">
      <Comments />
      <BrokeInSSR />
    </NuxtClientFallback>
  </div>
</template>

Events

  • @ssr-error: 当子组件在 SSR 中触发错误时发出的事件。注意，该事件仅会在服务器端触发。
    <template>
  <NuxtClientFallback @ssr-error="logSomeError">
    <!-- ... -->
  </NuxtClientFallback>
</template>

Props

  • placeholderTag | fallbackTag: 指定当插槽在服务端渲染失败时要渲染的回退标签。
    • 类型: string
    • 默认: div
  • placeholder | fallback: 指定当插槽渲染失败时要渲染的回退内容。
    • 类型: string
  • keepFallback: 如果在服务端渲染失败，保留回退内容。
    • 类型: boolean
    • 默认: false
<template>
  <!-- 如果默认插槽在服务端渲染失败，则在服务端渲染 <span>Hello world</span> -->
  <NuxtClientFallback
    fallback-tag="span"
    fallback="Hello world"
  >
    <BrokeInSSR />
  </NuxtClientFallback>
</template>

Slots

  • #fallback: 指定当插槽在服务端渲染失败时要在服务端显示的内容。
<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- 如果默认插槽在 SSR 中渲染失败，则此内容将在服务器端渲染 -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>