<NuxtClientFallback>

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

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

此组件是实验性的，要使用它，您必须在 nuxt.config 中启用 experimental.clientFallback 选项。
app/pages/example.vue
<template>
  <div>
    <Sidebar />
    <!-- this component will be rendered on client-side -->
    <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>
  <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
  <NuxtClientFallback
    fallback-tag="span"
    fallback="Hello world"
  >
    <BrokeInSSR />
  </NuxtClientFallback>
</template>

插槽

  • #fallback: 指定在插槽无法渲染时在服务器端显示的内容。
<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>