v3.17
GitHub

<NuxtClientFallback>

源代码 (客户端)源代码 (服务器)
Nuxt 提供了 <NuxtClientFallback> 组件，如果其任何子组件在 SSR 中触发错误，则在客户端渲染其内容

Nuxt 提供了 <NuxtClientFallback> 组件，如果其任何子组件在 SSR 中触发错误，则在客户端渲染其内容。

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

事件

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

属性

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

插槽

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