<NuxtClientFallback> · Nuxt 组件

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

此组件是实验性的，为了使用它，您必须在您的 nuxt.config 中启用 experimental.clientFallback 选项。

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>

使用 <DevOnly> 组件仅在开发期间渲染组件。

需要 <NuxtPage> 组件来显示位于 pages/ 目录中的页面。