NuxtClientFallback(实验性阶段)

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

这个组件是实验性的，为了使用它，你必须在你的nuxt.config中启用experimental

export defineNuxtConfig({
  experimental: {
    clientFallback: true
  }
})

事件

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